SlideShow

Extensible mid-level class that manages transitions of elements that share the same space, typically for slideshows, tabs, and galleries.

View the demo site for real world examples.

View the Docs for all methods and details.



Details

Author
Ryan Florence
GitHub
rpflorence/SlideShow
Downloads
24401
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • SlideShow
    • CSSAnimation/MooTools
    • Core/Fx.Tween
    • Core/Slick.Parser
    • Loop/Loop

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.

blog comments powered by Disqus