JavaScript Demo
JavaScript / HTML/ CSS Code
Output
<!DOCTYPE html> <html> <head> <link href='css/style-slider.css' rel='stylesheet'/> <script src="js/touchslider.js"></script> </head> <body> <h3>A slider with different options</h3> <div class='swipe' style='margin:10px;'> <ul id='slider'> <li style='display:block'><div>1</div></li> <li><div>2</div></li> <li><div>3</div></li> <li><div>4</div></li> <li><div>5</div></li> </ul> </div> <button onclick="t1.pause();">Pause</button> <button onclick="t1.play();">Play</button> <button onclick="t1.prev();">Prev</button> <button onclick="t1.next();">Next</button> <br/> <div id="pagenavi"> </div> <script type="text/javascript"> console=window.console || {dir:new Function(),log:new Function()}; var active=0, as=document.getElementById('pagenavi').getElementsByTagName('a'); for(var i=0;i<as.length;i++){ (function(){ var j=i; as[i].onclick=function(){ t4.slide(j); return false; } })(); } var t1=new TouchSlider('slider',{duration:800, interval:3000, direction:0, autoplay:true, align:'center', mousewheel:false, mouse:true, fullsize:false}); t4.on('before',function(m,n){ as[m].className=''; as[n].className='active'; }) </script> </body> </html>
A slider with different options
1
2
3
4
5
Pause
Play
Prev
Next