Image Slider with timer


/ Published in: jQuery
Save to your folder(s)

Image slider with timer per slide


Copy this code and paste it in your HTML
  1. Plugin:
  2. http://jquery.malsup.com/cycle/
  3.  
  4.  
  5. Javascript:
  6.  
  7. <script>
  8. $(document).ready(function(){
  9. $('.teasers ').cycle({
  10. fx: 'fade',
  11. speed: 'fast',
  12. timeoutFn: function (currSlideElement, nextSlideElement, options, forwardFlag) {
  13. return parseInt($(currSlideElement).attr('data-duration'));
  14. }
  15. });
  16. });
  17. </script>
  18.  
  19.  
  20. markup:
  21. <div class="bigTeaser">
  22. <div class="teasers">
  23. <img data-duration="2000" src="./img/teaser1.jpg" width="300" height="300" />
  24. <img data-duration="4000" src="./img/teaser2.jpg" width="300" height="300" />
  25. <img data-duration="2000" src="./img/teaser3.jpg" width="300" height="300" />
  26. <img data-duration="10000" src="./img/teaser4.jpg" width="300" height="300" />
  27. <img data-duration="1000" src="./img/teaser5.jpg" width="300" height="300" />
  28. </div>
  29. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.