MooTools

How to use

Simple Example

HTML

SlideShow naturally grabs all children elements of a parent as the slides.

<div id=slideshow>
  <div>Slide 1</div>
  <img src=image.jpg>
  <div>Slide 3</div>
</div>

CSS

Most transitions require absolutely positioned slides with top and left set to 0. SlideShow doesn't do this for you, keeping it more flexible for all types of transitions:

#slideshow {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative; /* not required, slideshow will set this for you */
}

#slideshow > * {
  position: absolute; /* required for most transitions */
  top: 0;             /* ditto */
  left: 0;            /* ditto */
  width: 100%;        /* usually required */
  height: 100%;       /* same */
}

JavaScript

var slideshow = new SlideShow('slideshow', {
  transition: 'fadeThroughBackground',
  delay: 5000,
  duration: 400,
  autoplay: true
});

Declarative Example

HTML

SlideShow can get all of the information it needs from the data-slideshow attribute in your HTML, and allows you to have different transitions for each slide.

<div id=slideshow data-slideshow="transition:fade delay:4000 duration:750">
  <div data-slideshow="transition:pushUp">Slide 1</div>
  <img data-slideshow="transition:slideRight" src=image.jpg>
  <div data-slideshow="transition:blindDown duration:1000">Slide 3</div>
</div>

JavaScript

var slideshow = new SlideShow('slideshow');

CSS Transitions

First include the SlideShow.CSS.js file. You'll then want to verify if the browser supports CSS transitions and transforms, I typically use Modernizr:

if (Modernizr.csstransitions && Modernizr.csstransforms){
    SlideShow.useCSS();
}

Browsers that support transitions and transforms will use the new CSS transitions instead of JavaScript.

Controlling a SlideShow

slideshow.show('next');
slideshow.show('previous');
slideshow.show(2); // shows the third slide
slideshow.play();

Creating a navigation interface

$$('.some-elements-in-the-order-of-the-slides').each(function(item, index){
  item.addEvent('click', function(){
    slideshow.show(index);
  });
});

Extending SlideShow with your own transitions

You can create whatever transitions you need with the SlideShow defineTransition function.

SlideShow.defineTransition('flash', function(data){
  data.previous.setStyle('display', 'none');
  data.next.setStyle('opacity', 0);
  new Fx.Tween(data.next, {
    duration: data.duration,
    property: 'opacity'
  }).start(1);
});

Features

• Custom transitions
• Autoplay
• Reverse
• Show next slide
• Show previous slide
• Show arbitrary slide
• Transitions by slide
• Durations by slide
• Default transitions
• Default durations
• On-the-fly transitions

19 Transitions Out Of The Box

• fade
• crossFade
• fadeThroughBackground
• pushLeft, pushRight, pushUp, pushDown
• blindLeft, blindRight, blindUp, blindDown
• slideLeft, slideRight, slideUp, slideDown
• blindLeftFade, blindRightFade, blindUpFade, blindDownFade

Events

• onShow
• onShowComplete
• onPlay
• onPause
• onReverse

Css Transitions

New in 2.0, SlideShow.CSS has a method to override JS animations with CSS3 animations. Still experimental.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.