SlideShow - a Highly Extendable MooTools Javascript Slideshow

By Ryan Florence, published 2010-01-01

Part of the issue Migrated Articles From Original Site Structure..

It seems with every new brochure-type website I worked on I was coming up a with a new slideshow/gallery widget. I’d download other great ones like BarackSlideshow, Floom etc. but they didn’t always fit the bill with what I or the designer I was working with wanted–don’t get me wrong, those scripts are great.

Finally I made Slideshow, the ultimate slideshow class. It handles all of the basics of a good javascript gallery and nothing else. No skins, no new elements, no navigation, just the slideshow basics. It implements another one of my scripts, Loop, to handle the autoplay.

Download it from the Forge, check out the MooDoc, fork it on github.


Sample code

Store the slides in a container with transition information on their class attribute.

<div id="slideshow">
	<div class="transition:crossFade duration:1000">1</div>
	<div>2</div> <!-- gets default transition and duration -->
	<div class="transition:blindRightFade duration:400">3</div>
	<div class="transition:fade duration:1000">4</div>
	<div class="transition:pushUp duration:2000">5</div>
	<div class="transition:pushDown duration:500">6</div>

Construct it like any other class

mySlideShow = new SlideShow('slideshow');



Rather than having built in transitions (or just a single transition) I borrowed some inspiration from FormValidator and added transitions similar to how FormValidator adds input validation rules. This makes it easy to create your own awesome transitions. Here are the packaged transitions:

Adding transitions is a snap. The Class itself has an add function that takes two arguments: the name of the transition, and the function to control it.

So here are a few examples:

SlideShow.add('fade', function(previous, next, duration, instance){
	previous.set('tween',{duration: duration}).fade('out');
	return this;

Pretty simple. Since the next slide is directly behind the previous, we can just fade out the previous slide and there’s our new one.

SlideShow.add('blindLeft', function(previous, next, duration, instance){
  var distance = instance.element.getStyle('width').toInt();
    'left': distance,
    'z-index': 2
  }).set('tween',{duration: duration}).tween('left', 0);
  return this;

A bit more complicated. First we have to measure the distance our slide needs to travel, then we set it’s left style to be totally out of the slideshow view and change it’s z-index from 0 to 2 so it’s above the previous slides z-index: 1. Once it’s all setup we just tween left back to 0. Our slide smoothly slides over the the previous slide.

SlideShow.add('blindLeftFade',function(p, n, d, i){

this references the object containing all of the transitions so you can chain effects.

Extend it!

I built this as a base for any slideshow. A slide show framework as it were. I have extended this and used it as is already for several projects and I’m in love with it. Adding a navigation piece could be as simple as:

  var slideLabels = $$('some-elements-in-the-same-order-as-the-slides');

  slideLabels.each(function(el, index){



Of course, it’d make more sense to wrap it up in a class, but you get the point. Look forward to several more posts using slideshow here and the forge (three with awesome WordPress integration.)

Download it from the Forge, check out the MooDoc, fork it on github.

MooTools used in this article



Hi, I'm Ryan!

South Jordan, UT

About Me

I'm a front-end web developer from Salt Lake City, Utah and have been creating websites since the early 90's. I like making awesome user experiences and leaving behind maintainable code. I'm active in the JavaScript community writing plugins, contributing to popular JavaScript libraries, speaking at conferences & meet-ups, and writing about it on the web. I work as the JavaScript guy at Instructure.