jquery - 推荐一个 jQuery 响应式轮播/ slider

标签 jquery carousel

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

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

此图片显示了该轮播在各种浏览器宽度下的表现...最暗的框是水平对齐的照片,其外部的较亮的框显示不同的浏览器窗口高度: enter image description here

对于那些无法理解我正在谈论的内容的人,下一个屏幕显示了浏览器窗口宽度 1920px、1800px、1600px 和 1400px 的外观。这些是来自整个网站的裁剪,填满了浏览器的整个宽度。 enter image description here enter image description here enter image description here enter image description here

最佳答案

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

皇家 slider

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

这个人拥有一切。触摸支持、高度可定制、响应式布局..您应该立即运行。价格标签为 12 美元。

卡鲁弗雷德塞尔

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

这个可能会引起一些兴趣.. http://coolcarousels.frebsite.nl/c/2/

关于jquery - 推荐一个 jQuery 响应式轮播/ slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16177246/

相关文章:

javascript - 悬停时左侧边距不适用于 Carousel

jquery - Owl Carousel 自动播放无法正常工作?

react-native - 如何在 react native snap carousel 的一个分页中显示 2 个项目

javascript - 将带有 "/"的字符串传递给 ajax

javascript - Math.Random - Javascript

javascript - Google Nexus 网站中使用的 JS 插件的名称

php - jQuery $.post PHP 处理多维对象或数组的最佳方法是什么

javascript 阻止默认的 keyup

reactjs - 无法使用react-native-snap-carousel

javascript - 使用 Kenwheeler slick carousel 的问题