推荐一个jQuery响应式走马灯/幻灯片插件

Question

我正在寻找一个现成的jQuery插件（免费或付费），可以帮助我创建具有触摸支持的“响应式旋转木马”。

它应该显示当前图像位于网站中央（所有图像的定义宽度和高度固定，图像垂直居中，轮播/滑块的高度不随浏览器宽度而变化），下一张图像部分或完全可见在右侧，前一张在左侧。 当浏览器变得更大时，会看到越来越多的“剪裁”图像，如果浏览器足够大，则可以完全看到3张照片，下一张将被切断在右侧，前一张在左侧。 图片看起来像胶卷，中间有一张图片，左右尽可能多的其他图片可见，取决于浏览器窗口大小。

以下图片展示了这个旋转木马在各种浏览器宽度下应该如何运行... 最暗的框是水平对齐的照片，外面较亮的框显示不同的浏览器窗口高度:

对于那些对我所说的内容感到困惑的人，下一个屏幕展示了它在浏览器窗口宽度为1920px、1800px、1600px和1400px时应该是什么样子。 这些都是从整个占满浏览器宽度的站点中裁剪的。

- Marcin Bobowski

---

我讨厌有些得票超过10个（显然对我们中的一些人很有用）的问题被关闭，认为其不符合主题。 >_< - jambriz

Answer 1

我最近几天在搜索类似的东西。到目前为止，我的收藏有：

Royal Slider

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

这个插件包括了所有需要的功能：触摸支持、高度可定制化、响应式布局......一切都很简单。售价为12美元。

carouFredSel

同样很强大，也支持触摸操作，但不像Royal Slider那么轻松和优雅，但它是免费的......他们有一个非常好的展示页面，上面有各种基于他们插件的旋转木马。

这个可能会有些有趣... http://coolcarousels.frebsite.nl/c/2/

- iococoi

---

看起来RoyalSlider可能是它。而且，就我考虑雇人编写或购买的情况而言，我也可以购买它 :)。 - Marcin Bobowski

并且它符合所有要求 :) - Marcin Bobowski

嗨Marcin，是的，Royalslider似乎非常顶尖，如果你遇到问题，你将拥有客户支持。我发现另一个看起来也非常有前途的，http://iosscripts.com/iosslider，在触摸时运行非常流畅。我今天必须研究一下它。 - iococoi

Answer 2

您可以使用以下两种轮播插件：

1. bxSlider: http://bxslider.com/ 2. FlexSlider: http://www.woothemes.com/flexslider/

- Hafid Denguir

---

是的，它们看起来都很酷！ - Simon East

+1 bxslider 代码真的很好。 - John Magnolia

Answer 3

我最近也在寻找类似的东西，并找到了以下文章：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html 浏览文章中提供的示例和它们的网站，并将它们与您的要求进行比较，我认为http://codecanyon.net/item/icarousel/full_screen_preview/2527180或http://www.bkosborne.com/jquery-feature-carousel 最适合您。不过第一个需要购买。

您应该查看第一篇文章。我可能忽略了某些内容，或者您可能会发现更适合您的东西...

- Catalin Deaconescu

Answer 4

如果需要，Wowslider可以很有用。请访问http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html查看。

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

- Ayush

---

WowSlider有很多很酷的效果，非常不错！但商业使用需要支付69美元。 - Simon East

Answer 5

我会使用这个。http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ 它使用CSS3动画，并且因为它是纯CSS，您可以使用@media查询在屏幕大小更改时更改应用于滑块的CSS。

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

- btm1

---

这个滑块很不错，但它默认不支持“胶片条”样式，重新编码超出了我的编程能力范围 :( - Marcin Bobowski

你所说的“film strip”是什么意思？您希望它从左到右滑动还是从右到左滑动，或者淡入淡出？ - btm1

看一下我帖子中的图片。水平对齐的黑色矩形代表照片。当前有一个位于中心（水平居中），左右两侧显示尽可能多的照片以适应浏览器窗口大小。如果某个照片太大无法适应，它将被浏览器窗口切割。您可以滑动以将一张照片移动到左侧或右侧。 - Marcin Bobowski

Answer 6

Swipe 看起来相当不错，反应灵敏。它也非常流畅，支持在移动设备/平板电脑上轻扫。

http://swipejs.com/

也许没有 Royal Slider 那么强大，但它是免费的。

- Simon East