Cycle2 Swipe

NOTE: iOS6 has a bug which causes the swipe functionality to malfunction in certain cases. A fix for this iOS6 bug has been provided by kTmnh via this gist: https://gist.github.com/3798925.

I have saved the source code for that gist at http://malsup.github.io/ios6fix.js. For proper swipe behavior on iOS6, include this fix on your page (conditionally, ideally) and follow the remaining instructions below.

Cycle2 supports the swipe gesture for advancing slides on touch devices. If you are not using jQuery Mobile on your page then you will need to include Cycle2's swipe event plugin which can be found on the Download page.

On mobile devices, swipe left and right on the demo below to move forward and back through the slides

To bind swipe events to the prev and next actions you simply set the data-cycle-swipe option to true. You can also specify the transition effect for the swipe-triggered transition using the data-cycle-swipe-fx attribute.

<div class="cycle-slideshow" 
    data-cycle-swipe=true
    data-cycle-swipe-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-prev=".prev"
    data-cycle-next=".next"
    >
    <div class="cycle-caption"></div>

    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Traditional prev/next links can be used as well:

<<Prev Next>>