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 demo of image slider</h3> <div class='swipe'> <ul id='slider4'> <li style='display:block'><img src="images/banana.jpg" alt="" /></a></li> <li><img src="images/currant.jpg" alt="" /></li> <li><img src="images/strawberries.jpg" alt="" /></li> <li><img src="images/mango.jpg" alt="" /></li> </ul> </div> <div> <a href="#" onclick="t4.slide(0);return false;"> 1 </a> <a href="#" onclick="t4.slide(1);return false;"> 2 </a> <a href="#" onclick="t4.slide(2);return false;"> 3 </a> <a href="#" onclick="t4.slide(3);return false;"> 4 </a> </div> <br/> <div id="pagenavi">Slide Navigation: <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> <br> <button onclick="t4.pause();">Pause</button> <button onclick="t4.play();">Play</button> <button onclick="t4.prev();">Prev</button> <button onclick="t4.next();">Next</button> <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 t4=new TouchSlider('slider4',{speed:1000, direction:0, interval:2000, fullsize:true}); t4.on('before',function(m,n){ as[m].className=''; as[n].className='active'; }) </script> </body> </html>
A demo of image slider
1
2
3
4
Slide Navigation:
1
2
3
4
Pause
Play
Prev
Next
