17

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

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

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

对于那些在视觉上遇到问题的人，接下来的屏幕会显示宽度浏览器窗口宽度 1920 像素、1800 像素、1600 像素和 1400 像素的外观。这些是来自整个网站的作物，充满了浏览器的整个宽度。 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

4

6 回答 6

10

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

皇家滑块

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

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

卡罗弗雷德塞尔

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

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

于 2013-05-01T18:49:42.867 回答
6

您可以使用：

于 2013-04-26T22:55:13.557 回答
1

I would use this one. http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ it uses css3 animations and because it's pure css you can use @media queries to change the applied css on the slider as the screen size changes.

You can see more on media queries by looking at this boilerplate http://www.getskeleton.com/

于 2013-04-23T19:23:33.370 回答
1

我最近自己搜索过类似的东西，发现了以下文章：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最适合您。第一个将要求您购买它。

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

于 2013-05-01T12:32:08.880 回答
1

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

http://www.smoothdivscroll.com/#quickdemo也提供了类似的解决方案

于 2013-05-03T09:03:43.140 回答
0

滑动看起来相当不错并且反应灵敏。它也非常流畅，支持在手机/平板电脑上滑动。

http://swipejs.com/

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

于 2013-07-06T01:34:59.097 回答