Transition Between Images Slideshow (Mootools)


  1. Fade, Slide and Wipe transitions
  2. loops
  3. Play, Stop, Next and Previous controls
  4. Inits from array of image src’s, a list of images on the page or using the href of an a tag like the lightbox



var obj = {
wait: 3000,
effect: 'fade',
duration: 1000,
loop: true,
thumbnails: true,
backgroundSlider: true,
onClick: function(i){alert(i)}
show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);


effect                               the transition effect to use (fade|wipe|slide|random). default: ‘fade’
duration                            the length of the transition. default: 2000
transition                           default: Fx.Transitions.linear
direction                             the direction of the transition if wipe or slide is used (top|right|bottom|left|random).
default: ‘right’
wait                                    the length of time to waqit before going to the next image. default: 5000
loop                                   when the last image is reached it will go back to the start. default: false
thumbnails                          using thumbnails or not. default: false
thumbnailCls                       the name of the class to use for showing the current image. default: ‘outline’
backgroundSlider                 use the backgroundSlider class for the thumbnails. default: false

Leave a comment