<div class="touchslider"><div class="touchslider-viewport" style="width:500px;overflow:hidden"><div><div class="touchslider-item"><!-- your html content --></div><div class="touchslider-item"></div>
...
</div></div><div><span class="touchslider-prev">←</span><span class="touchslider-nav-item touchslider-nav-item-current">1</span><span class="touchslider-nav-item">2</span>
...
<span class="touchslider-next">→</span></div></div>
JavaScript options:
container: this,
duration: 350, // the speed of the sliding animation in milliseconds
delay: 3000, // initial auto-scrolling delay for each loop
margin: 5, // borders size. The margin is set in pixels.
mouseTouch: true,
namespace: "touchslider",
next: ".touchslider-next", // jQuery object for the elements to which a "scroll forwards" action should be bound.
pagination: ".touchslider-nav-item",
currentClass: "touchslider-nav-item-current", // class name for current pagination item.
prev: ".touchslider-prev", // jQuery object for the elements to which a "scroll backwards" action should be bound.
scroller: viewport.children(),
autoplay: false, // whether to move from image to image automatically
viewport: ".touchslider-viewport"
Note: be sure not to include a "," after the last line or you'll get an error
in Internet Explorer.
To manually start and stop the slider you can use the following code:
$(".touchslider").data("touchslider").stop(); // stop the slider$(".touchslider").data("touchslider").start(); // start the slider
flick.zip