Return to Snippet

Revision: 56343
at March 22, 2012 22:31 by hoogvlieger


Initial Code
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>

Initial URL

                                

Initial Description
Image  slider with timer per slide

Initial Title
Image  Slider with timer

Initial Tags

                                

Initial Language
jQuery