javascript 如何在图像滑块中制作滑动效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8531079/
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
How to make a swipe effect in the image slider?
提问by Umair Abid
I made an image slider using this plugin http://slidesjs.com/while ago for a mobile website. To meet the requirements of my client I also made some modifications in the plugin and triggered some functions on the events defined by the plugin. Now, a swipe effect is also required in the slider to images of slider by moving them using touch.
我之前使用这个插件http://slidesjs.com/为一个移动网站制作了一个图像滑块。为了满足客户的要求，我还对插件进行了一些修改，并在插件定义的事件上触发了一些函数。现在，通过使用触摸移动滑块图像，滑块中还需要滑动效果。
I used some swipe codes but they conflict with the plugin I used before to make a slider. Like at one time you can only use one functionality at one time.
我使用了一些刷卡代码，但它们与我之前用来制作滑块的插件冲突。就像一次只能使用一种功能一样。
<div class="slides-wrapper">
<div class="wrapper-spacer"></div>
<div class="slides-container">
<div id="productImage1" class="slideshow-image">
<img src="../images/ecommerce-work-1.png" alt="Product 1" />
</div>
<div id="productImage2" class="slideshow-image">
<img src="../images/ecommerce-work-2.png" alt="Product 2" />
</div>
<div id="productImage3" class="slideshow-image">
<img src="../images/ecommerce-work-3.png" alt="Product 3" />
</div>
</div>
</div>
This is the markup of main image slider container the plugin for slider is using two more containers for pagination and next previous button. While their is another container which I am using to display name of the image. I explored some sliders plugin but they are very rough, not using variables for the class names rather than names. So everything is producing a lot of errors. It is hard for me to make changes in the core of javascript plugins because I am not a front end developer and more familiar with php
这是主图像滑块容器的标记滑块插件使用另外两个容器用于分页和下一个上一个按钮。虽然它们是我用来显示图像名称的另一个容器。我探索了一些滑块插件，但它们非常粗糙，没有使用类名而不是名称的变量。所以一切都会产生很多错误。javascript插件的核心对我来说很难改变，因为我不是前端开发人员，对php比较熟悉
I used this plugin http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/to introduce the swipe effect in image slider.
我使用这个插件http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/来介绍图像滑块中的滑动效果。
采纳答案by Colin James Firth
I had a similar issue recently, and used hammer.js: http://eightmedia.github.com/hammer.js/
我最近遇到了类似的问题，并使用了hammer.js：http://eightmedia.github.com/hammer.js/
回答by Yoann
I suggest you to use FlexSliderwho already include swipe feature. The HTML code is almost the same you have just to change some class name.
我建议您使用已经包含滑动功能的FlexSlider。HTML 代码几乎相同，您只需更改一些类名即可。
