JavaScript touch control slider
Download v0.95 (3KB minified and gzipped).
Actively supports these browsers: IE6+, Firefox 3+, Safari 5 (mobile Safari 4), Chrome 15, Opera 10+. Need jQuery 1.6+.
Source code on GitHub.
TouchSlider depends on jQuery. Include both in your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.touchslider.min.js"></script> <script> jQuery(function($) { $(".touchslider").touchSlider({/*options*/}); }); </script>
In your html do something like:
<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