【问题标题】:Recommend a jQuery responsive carousel / slider [closed]推荐一个 jQuery 响应式轮播/滑块 [关闭]
【发布时间】:2013-04-17 03:12:42
【问题描述】:

我正在寻找一个现成的 jQuery 插件(免费或付费),它可以让我创建支持触摸的“响应式轮播”。

它应该工作的方式是在站点中间显示当前图像(定义图像的宽度和高度,固定所有图像,图像垂直居中,轮播/滑块的高度不随浏览器宽度而变化),部分或右侧完全可见下一张图片,左侧为上一张。 当浏览器变大时,那些“剪掉”的图片会越来越多,如果浏览器足够大,3张照片会被完全看清,下一张在右边被剪掉,上一张在左边被剪掉。 图片看起来像幻灯片,中间有一张图片,在浏览器窗口允许的情况下,其他图片在左右可见。

这张图片显示了这个轮播在不同的浏览器宽度下应该如何表现......最暗的框是水平对齐的照片,它们之外的较亮的框显示不同的浏览器窗口高度:

对于那些无法看到我正在谈论的内容的人,接下来的屏幕会显示宽度浏览器窗口宽度 1920 像素、1800 像素、1600 像素和 1400 像素。这些是来自整个网站的作物,充满了浏览器的整个宽度。

【问题讨论】:

  • 我讨厌一个超过 10 票的问题(显然对我们中的一些人有用)被关闭为题外话>_

标签: jquery carousel


【解决方案1】:

过去几天我一直在寻找非常相似的东西。到目前为止我的最爱

皇家滑块

http://dimsemenov.com/plugins/royal-slider/visible-nearby/

这个得到了一切。触摸支持,高度可定制,响应式布局..您应该立即运行。价格标签是 12 美元。

carouFredSel

也非常强大,支持触摸,但不像皇家滑块那样无忧无虑和优雅,但话又说回来,它是免费的..他们有一个非常好的展示页面,其中包含基于他们的插件的各种轮播..

这个可能有点意思.. http://coolcarousels.frebsite.nl/c/2/

【讨论】:

  • 看来 RoyalSlider 可能是我。至于我想花钱请人写它,我也可以买它:)。
  • 它符合所有要求:)
  • hi marcin..是的,royalslider 似乎相当一流,如果您遇到问题,您将获得客户支持..我找到了另一个,看起来也很有希望..@987654323 @ .. 触摸时非常流畅..我今天必须研究一下
【解决方案2】:

你可以使用:

【讨论】:

  • 是的,这两个看起来都很酷!
  • +1 bxslider 代码真不错
【解决方案3】:

我会用这个。 http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ 它使用 css3 动画,因为它是纯 css,所以您可以使用 @media 查询来随着屏幕大小的变化而更改滑块上应用的 css。

通过查看此样板文件http://www.getskeleton.com/,您可以了解有关媒体查询的更多信息

【讨论】:

  • 这个滑块很不错,但它不支持“胶片”外观 ootb,并且重新编码超出了我的编码能力:(
  • 胶片是什么意思?你想让它从左向右滑动还是从右向左滑动或淡入淡出?
  • 查看我帖子中的图片。水平对齐的深色矩形代表照片。当前有一个在中心(水平居中),并且在浏览器窗口中可以容纳的左右数量。如果一个不适合它被浏览器窗口剪切。滑动即可将一张照片向左或向右移动。
【解决方案4】:

我最近自己搜索了类似的东西,发现了以下文章:http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

查看文章及其网站上提供的示例并将它们与您的要求进行比较,我认为http://codecanyon.net/item/icarousel/full_screen_preview/2527180http://www.bkosborne.com/jquery-feature-carousel 最适合您。第一个将要求您购买它。

你应该看看第一篇文章。有可能我忽略了一些东西,或者你找到了更适合的东西......

【讨论】:

    【解决方案5】:

    Wowslider 在这种情况下可能很有用.. 检查一次 http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html

    类似的解决方案也可以在 http://www.smoothdivscroll.com/#quickdemo

    【讨论】:

    • WowSlider 有很多很酷的效果,真的很棒!虽然用于商业用途的成本为 69 美元。
    【解决方案6】:

    Swipe 看起来很不错,而且反应灵敏。它也非常流畅,支持在手机/平板电脑上滑动。

    http://swipejs.com/

    可能不如 Royal Slider 功能齐全,但它是免费的。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-04-01
      • 1970-01-01
      • 1970-01-01
      • 2016-01-09
      • 1970-01-01
      • 2015-10-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多