jQuery触摸可拖动响应式滚动条/幻灯片/轮播?

时间:2012-12-18 15:18:52

标签: jquery scroll responsive-design draggable carousel

我正在寻找启用触控,可拖动,响应式jQuery 卷轴/幻灯片/轮播/滑块,用于显示水平可滚动项目列表(例如,针对特色产品) eshop,最近将照片添加到数据库等。)。

在每个应用程序的页面上,它看起来类似于Apple App Store中的图像滚动条。我不希望一次看到一个大图像的典型滑块。我希望看到彼此相邻的图像,用户可以在它们之间轻松滚动。

通过拖动我的意思是拖拉滚动不将项目从列表移动到其他地方。见下文。

严格要求

  • 基于jQuery(或独立于库)
  • 响应(不固定宽度)
  • 每张图片的链接和标题
  • 可拖动滚动 - 使用鼠标和手指 - 我拖动项目,移动和放下,列表将mooooove然后停止。就像在智能手机上滚动一样,但即使使用鼠标也能正常工作。
  • 某些API可以让我在到达列表末尾时加载更多项目(不是严格的要求,我想我可能会知道它);如果滚动器检测到用户何时到达列表末尾并且滚动器调用我的函数以附加更多项目,则可以执行此操作

很高兴

  • 图片可以有可变宽度
  • 自动播放 - 从一个项目移动到另一个项目或逐个像素地慢慢移动
  • 设置可见项目的最小和最大数量
  • 当用户滚动并且列表正在滚动时,会出现滚动条

首先,我在我的网站上实施了FlexSlider 2 carousel。触摸手势有效,但鼠标手势/滚动不起作用。 FlexSlider是一个不滑动的滑块:/否则FlexSlider会刮伤我的痒。

请发布链接,我会检查一下。对于其他网站设计师来说,这是一个有价值的最佳jQuery滚动列表。

谢谢大家!

1 个答案:

答案 0 :(得分:1)

尝试使用jquery插件(jquery.nicescroll.js)。它也支持触摸设备。

http://areaaperta.com/nicescroll/

http://code.google.com/p/jquery-nicescroll/downloads/list