推荐一个 jQuery 响应式轮播/滑块 [关闭]

Posted 2023-02-16

【中文标题】推荐一个 jQuery 响应式轮播/滑块 [关闭]

【英文标题】：Recommend a jQuery responsive carousel / slider [closed]

【发布时间】：2013-04-17 03:12:42

【问题描述】：

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

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

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

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

【问题讨论】：

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

【参考方案1】：

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

皇家滑块

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

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

carouFredSel

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

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

【讨论】：

看来 RoyalSlider 可能是我。至于我想花钱请人写它，我也可以买它:)。

它符合所有要求:)

hi marcin..是的，royalslider 似乎相当一流，如果您遇到问题，您将获得客户支持..我找到了另一个，看起来也很有希望..@987654323 @ .. 触摸时非常流畅..我今天必须研究一下

【参考方案2】：

你可以使用：

bxSlider：http://bxslider.com/ FlexSlider：http://www.woothemes.com/flexslider/

【讨论】：

是的，这两个看起来都很酷！

+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/2527180 或http://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 功能齐全，但它是免费的。