Advanced Search

Image Slider with timer

/ Published in: jQuery
Save to your folder(s)
Image slider with timer per slide

Expand | Embed | Plain Text

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.