Javascript 支持 jQuery 和触摸设备的水平滑动滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8098107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal swipe slider with jQuery and touch devices support?
提问by Jitendra Vyas
I need to make a product slider like this ( see red area ) swipe slider with momentum.
我需要制作一个像这样的产品滑块（见红色区域）具有动量的滑动滑块。
It should work on Desktop, iPad and Mobile browser. Do you know any jquery/jquery mobile plugin to achieve this.
它应该适用于桌面、iPad 和移动浏览器。你知道任何 jquery/jquery 移动插件来实现这一点。
The effect I want is almost similar to this http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html(but it's not touch compatible)
我想要的效果几乎类似于这个http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html（但它不兼容触摸）
and exactly like "Top 25" section in Apple's iPad app named "Trailers"
与 Apple iPad 应用程序“Trailers”中的“Top 25”部分完全一样
回答by Jaime Fernandez
In my opinion iosSlideris amazing. It works in almost any device and it is well documented. It's free for personal usage, but for commercial sites license costs $20.
在我看来iosSlider很棒。它几乎适用于任何设备，并且有据可查。个人使用免费，但商业网站的许可证费用为 20 美元。
Also a great option is touchCarouselor RoyalSliderfrom same author. These two have everything you'll need, but also not freeand have a price of $10-12
同样一个不错的选择是来自同一作者的touchCarousel或RoyalSlider。这两个拥有您需要的一切，但也不是免费的，价格为 10-12 美元
回答by Thomas
I would also recommend http://cubiq.org/iscroll-4
我也推荐http://cubiq.org/iscroll-4
BUT if you're not digging on that try this plugin
但是，如果您不深入研究，请尝试使用此插件
http://www.zackgrossbart.com/hackito/touchslider/
http://www.zackgrossbart.com/hackito/touchslider/
it works very well and defaults to a horizontal slide bar on desktop -- it's not as elegant on desktop as iscroll-4 is, but it works very well on touch devices
它工作得很好，默认为桌面上的水平滑动条——它在桌面上不像 iscroll-4 那样优雅，但在触摸设备上工作得很好
GOOD LUCK!
祝你好运！
回答by jancha
If I was you, I would implement my own solution based on the event specs. Basically, what swipe is - it's handling of touch down, touch move, touch up events. here is excerpt of my own lib for handling iPhone touch events:
如果我是你，我会根据事件规范实现我自己的解决方案。基本上，什么是滑动 - 它处理触摸、触摸移动、触摸事件。这是我自己的用于处理 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');
}
I used that code to "move things around". But, instead of moving, you can create your own algorithm for e.g. triggering redirect to some other location, or you can use that move to "move/swipe" the element, on which the swipe is on to other location.
我使用该代码来“移动事物”。但是，您可以创建自己的算法而不是移动，例如触发重定向到某个其他位置，或者您可以使用该移动来“移动/滑动”元素，在该元素上滑动到其他位置。
so, it really helps to understand basics of how things work and then create more complicated solutions. this might help as well.
因此，了解事物工作原理的基础知识，然后创建更复杂的解决方案确实很有帮助。这也可能有帮助。
I used this, to create my solution:
我用它来创建我的解决方案：
回答by Marcus
Have you tried iosSlider? It can do exactly what you need.
你试过 iosSlider 吗？它可以完全满足您的需求。
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
回答by dSquared
Take a look at iScroll v4 here: http://cubiq.org/iscroll-4
在此处查看 iScroll v4：http://cubiq.org/iscroll-4
It may not be jQuery, but it works on Desktop Mobile, and iPad quite well; I've used it on many projects and combined it with jQuery.
它可能不是 jQuery，但它在桌面移动设备和 iPad 上运行良好；我已经在许多项目中使用过它，并将它与 jQuery 结合使用。
Good Luck!
祝你好运！
回答by J?rg Butzer
This one could fit your need:
http://caroufredsel.frebsite.nl/
这个可以满足您的需要：http:
//caroufredsel.frebsite.nl/
Add jquery Touchwipefor touch support
添加jquery Touchwipe以支持触摸
Then in the configuration add
然后在配置中添加
scroll : {
wipe: true
}
回答by DesignerBrent
Have you seen FlexSliderfrom WooThemes? I've used it on several recent projects with great success. It's touch enabled too so it will work on both mouse-based browsers as well as touch-based browsers in iOS and Android.
你见过WooThemes 的FlexSlider吗？我在最近的几个项目中使用了它，并取得了巨大的成功。它也启用了触摸功能，因此它可以在基于鼠标的浏览器以及 iOS 和 Android 中的基于触摸的浏览器上运行。
回答by Yoann
I have made somthink like this for one of my website accualy in developpement.
我在开发过程中为我的一个网站做出了这样的思考。
I have used StepCarouselfor the caroussel because it's the only one I found that can accept different image size in the same carrousel.
我将StepCarousel用于轮播，因为它是我发现的唯一一种可以在同一个轮播中接受不同图像大小的轮播。
In addition to this to add the touch swipe effect, I have used jquery.touchswipeplugin;
除了这个添加触摸滑动效果，我使用了jquery.touchswipe插件；
And stepcarousel move panel rigth or left with a fonction so I can make :
并且 stepcarousel 移动面板 rigth 或 left 一个功能，这样我就可以：
$("#slider-actu").touchwipe({
wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
min_move_x: 20
});
You can view the actual render at this page
您可以在此页面查看实际渲染
Hope that help you.
希望能帮到你。
回答by MrShmee
Ive found another: http://swipejs.com/
我找到了另一个：http: //swipejs.com/
seems to work nicely however I encounter an issue with it when paired with bootstrap on the OS X version of Chrome. If total cross-browser compatibility isn't an issue, then you're golden.
似乎工作得很好，但是当与 OS X 版本的 Chrome 上的引导程序配对时，我遇到了问题。如果完全跨浏览器兼容性不是问题，那么您就是黄金。
回答by Sergio Majluf
I found this, hope it helps http://www.zackgrossbart.com/hackito/touchslider/
我找到了这个，希望它有帮助 http://www.zackgrossbart.com/hackito/touchslider/
