水平滑动滑块与jQuery和触摸设备的支持？
我需要制作一个像这样的产品滑块（请参阅红色区域）滑动滑块。
它应该在桌面，iPad和移动浏览器上工作。 你知道任何jQuery / jQuery的手机插件来实现这一目标。
我想要的效果几乎类似于这个http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html （但它不是触摸兼容的）
和苹果iPad应用“拖车”中的“Top 25”一样，
在我看来， iosSlider是惊人的。 它几乎可以在任何设备上工作，并且有很好的文档logging 这是免费的个人使用，但商业网站许可证费用20美元。
另外一个很好的select是来自同一作者的touchCarousel或RoyalSlider 。 这两个有你需要的一切， 但也不是免费的 ，价格是10-12美元
我也build议http://cubiq.org/iscroll-4
但是如果你没有挖掘，试试这个插件
http://www.zackgrossbart.com/hackito/touchslider/
它工作得很好，并默认为桌面上的水平滑动条 – 它不像桌面上那么优雅，但它在触摸设备上运行得非常好
祝你好运！
如果我是你，我会根据事件规范实施我自己的解决scheme。 基本上，滑动是 – 触摸，触摸移动，触摸事件的处理。 这里是我自己的库处理iPhone触摸事件的摘录：
touch_object.prototype.handle_touchstart = function(e){ if (e.targetTouches.length != 1){ return false; } this.obj.style.zIndex = 100; e.preventDefault(); this.startX = e.targetTouches[0].pageX - this.geometry.x; this.startY = e.targetTouches[0].pageY - this.geometry.y; /* adjust for left /top */ this.bind_handler('touchmove'); this.bind_handler('touchend'); } touch_object.prototype.handle_touchmove = function(e) { e.preventDefault(); if (e.targetTouches.length != 1){ return false; } var x=e.targetTouches[0].pageX - this.startX; var y=e.targetTouches[0].pageY - this.startY; this.move(x,y); } touch_object.prototype.handle_touchend = function(e){ this.obj.style.zIndex = 10; this.unbind_handler('touchmove'); this.unbind_handler('touchend'); } 我使用该代码来“移动”。 但是，您可以创build自己的algorithm，例如触发redirect到其他某个位置，也可以使用该移动来“移动/滑动”滑动所在的元素到其他位置。
因此，了解事情的基本原理，然后创build更复杂的解决scheme真的有帮助。 这可能也有帮助。
我用这个来创build我的解决scheme：
你尝试过iosSlider吗？ 它可以做到你所需要的。
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
在这里看看iScroll v4： http ://cubiq.org/iscroll-4
它可能不是jQuery，但它适用于Desktop Mobile和iPad; 我已经在很多项目中使用过它，并将其与jQuery结合起来。
祝你好运！
这个可以满足你的需要：
http://caroufredsel.frebsite.nl/
添加jQuery的Touchwipe触摸支持
然后在configuration中添加
scroll : { wipe: true }
你见过WooThemes的FlexSlider吗？ 我已经在最近的几个项目中使用过，取得了很大的成功 它也支持触摸，所以它可以在基于鼠标的浏览器以及iOS和Android的基于触摸的浏览器上运行。
我发现另一个： http : //swipejs.com/
似乎很好地工作，但是我遇到一个问题，当与OS X版本的Chrome引导配对。 如果跨浏览器的兼容性不是问题，那么你是黄金。
我已经为我的一个网站在开发过程中提供了这样的想法。
我已经使用CarClass的StepCarousel，因为它是唯一一个我发现，可以接受不同的图像大小在同一个卡鲁塞尔。
除了这个添加触摸滑动效果，我已经使用jquery.touchswipe插件;
而stepcarousel移动面板rigth或留下一个fonction，所以我可以使：
$("#slider-actu").touchwipe({ wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);}, wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);}, min_move_x: 20 });
您可以在此页面查看实际渲染
希望能帮到你。
这看起来很相似，并使用jQuery手机http://www.irinavelychko.com/tutorials/jquery-mobile-gallery
而且，它的演示http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html
看看jQuery的滚动视图（ 在这里演示）。 这是用于该实验项目的git集线器存储库。 看看他们的html，看看需要包含哪些文件，以及要添加到要滚动的元素的属性。
我已经使用它可以在触摸设备上水平滚动div元素。
您可能对以下内容感兴趣：
- jQuery Mobile Carousel （ github ）
- jQuery Mobile
我意识到这不是一个jQuery的解决scheme，但Sencha的触摸框架是非常好的build立你的目标用户界面。 示例（单击传送带侧边栏链接）： http : //dev.sencha.com/deploy/touch/examples/kitchensink/
Checkout Portfoliojs jQuery插件： http ： //portfoliojs.com
这个插件支持触摸设备，桌面和手机浏览器。 此外，它具有预加载function。
通过我的实验，最好的开源选项将是UIKIT的uikit滑块组件 。 而且这很容易实现，例如在你的情况下，你可以做这样的事情。
<div data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements <li>...</li> //slide elements ... </ul> </div>
