/ Published in: jQuery
Image slider with timer per slide
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
Plugin: http://jquery.malsup.com/cycle/ Javascript: <script> $(document).ready(function(){ $('.teasers ').cycle({ fx: 'fade', speed: 'fast', timeoutFn: function (currSlideElement, nextSlideElement, options, forwardFlag) { return parseInt($(currSlideElement).attr('data-duration')); } }); }); </script> markup: <div class="bigTeaser"> <div class="teasers"> <img data-duration="2000" src="./img/teaser1.jpg" width="300" height="300" /> <img data-duration="4000" src="./img/teaser2.jpg" width="300" height="300" /> <img data-duration="2000" src="./img/teaser3.jpg" width="300" height="300" /> <img data-duration="10000" src="./img/teaser4.jpg" width="300" height="300" /> <img data-duration="1000" src="./img/teaser5.jpg" width="300" height="300" /> </div> </div>