YUI3 Animated Slideshow Auto Examples
Docs | Auto (basic usage) Examples | Customizing the Auto Method Examples | Manual Examples | New Auto Method ExamplesThe Animated Slideshow script easily converts html content into a slideshow. It supports any html element so the slides can be divs, imgs, or any other html element you want. It supports a variety of slide transitions and user actions including:
Auto method
All the example slideshows on this page are generated with a single javascript call
Y.SlideshowAnimated.auto(); this method looks for elements within the page that have the class "slideshow"
on them, and then attempts to turn those elements into slideshows. As the examples below show you can customize the
slideshow transitions be specifying additional CSS classes on the slideshow element.
The Javascript used for these examples:
<script type="text/javascript">
YUI({
modules: {
'gallery-slideshow-base': {
fullpath: 'gallery-slideshow-base-min.js',
requires: ['node', 'event', 'widget']
},
'gallery-slideshow-animated': {
fullpath: 'gallery-slideshow-animated-min.js',
requires: ['anim', 'gallery-slideshow-base']
}
}
}).use("gallery-slideshow-animated", function(Y) {
Y.SlideshowAnimated.auto();
});
</script>
Slideshow using the default fade transition
This is the basic default slideshow used for any element with the class of "slideshow".
The html
<div class="slideshow">
<img src="media/slide_1.jpg" class="slide current">
<img src="media/slide_2.jpg" class="slide">
<img src="media/slide_3.jpg" class="slide">
<img src="media/slide_4.jpg" class="slide">
</div>
The CSS
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slide { display: none; position: absolute;}
.slide.current { display: block; }
Slideshow using the horizontal transition, with a "Play" and "Pause" button
The html
<div class="slideshow horizontalSlideshow">
<div class="slideHolder">
<div class="slide"><img src="media/slide_1.jpg"></div>
<div class="slide"><img src="media/slide_2.jpg"></div>
<div class="slide"><img src="media/slide_3.jpg"></div>
<div class="slide"><img src="media/slide_4.jpg"></div>
</div>
<div><a href="" class="play">Play</a> <a href="" class="pause">Pause</a></div>
</div>
This slideshow has the class of "horizontalSlideshow" so the slide transition in from the right to left. It also has the "play" button and "pause" buttons, identified by the "play" and "pause" CSS class. Which ever button is currently deactivated will have the "inactive" CSS class applied to it.
The CSS
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slideHolder {position: relative; height:212px; width: 393px;}
.slide { display: none; position: absolute; }
.slide.current { display: block; }
.inactive {color: #ccc; }
Slideshow with horizontal cross transition and next and previous buttons
The html
<div class="slideshow horizontalCrossSlideshow">
<div>
<a href="" class="previous">< prev</a>
<a href="" class="next">next ></a>
</div>
<div class="slide current">
<p><strong>First Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="slide">
<p><strong>Second Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="slide">
<p><strong>Third Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="slide">
<p><strong>Fourth Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
The next and previous buttons are designated by the elements in the slideshow with the "next" and "previous" CSS classes respectively.
The CSS
.slideshow { position: relative; height: 250px; width: 393px; overflow: hidden; }
.slide { display: none; position: absolute; }
.slide.current { display: block; }
Slideshow with a vertical slide transition and individual slide selectors
The html
<div class="slideshow verticalSlideshow">
<div>
<a href="" class="previous">< prev</a>
<a href="" class="slideSelector">1</a>
<a href="" class="slideSelector">2</a>
<a href="" class="slideSelector">3</a>
<a href="" class="slideSelector">4</a>
<a href="" class="next">next ></a>
</div>
<img src="media/slide_1.jpg" class="slide current">
<img src="media/slide_2.jpg" class="slide">
<img src="media/slide_3.jpg" class="slide">
<img src="media/slide_4.jpg" class="slide">
</div>
The individual slide selectors are enabled by adding items with the "slideSelector" class. When one of the buttons is clicked it will advance directly to that slide and stop the slideshow. The slideSelector for the current slide will also have the CSS class of "current" applied to it so you can style the selector for the current slide.
The CSS
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slide { display: none; position: absolute; }
.slide.current { display: block; }
.current {font-weight: 700;}
Slideshow with vertical cross transition and starting on the third slide
The html
<div class="slideshow verticalCrossSlideshow">
<div>
<a href="" class="previous">< prev</a>
<a href="" class="slideSelector">1</a>
<a href="" class="slideSelector">2</a>
<a href="" class="slideSelector">3</a>
<a href="" class="slideSelector">4</a>
<a href="" class="next">next ></a>
</div>
<div class="slide current">
<p><strong>First Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="slide">
<p><strong>Second Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="slide">
<p><strong>Third Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="slide">
<p><strong>Fourth Slide</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
</div>
The CSS
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slide { display: none; position: absolute; }
.slide.current { display: block; }
.current {font-weight: 700;}
Slideshow with panning transition
The html
<div class="slideshow panningSlideshow">
<div class="viewer">
<div class="container">
<img src="media/slide_1.jpg" class="slide current">
<img src="media/slide_2.jpg" class="slide">
<img src="media/slide_3.jpg" class="slide">
<img src="media/slide_4.jpg" class="slide">
<img src="media/slide_1.jpg" class="slide">
<img src="media/slide_2.jpg" class="slide">
<img src="media/slide_3.jpg" class="slide">
<img src="media/slide_4.jpg" class="slide">
<img src="media/slide_1.jpg" class="slide">
</div>
</div>
<div>
<a href="" class="previous">< prev</a>
<a href="" class="slideSelector">1</a>
<a href="" class="slideSelector">2</a>
<a href="" class="slideSelector">3</a>
<a href="" class="slideSelector">4</a>
<a href="" class="slideSelector">5</a>
<a href="" class="slideSelector">6</a>
<a href="" class="slideSelector">7</a>
<a href="" class="slideSelector">8</a>
<a href="" class="slideSelector">9</a>
<a href="" class="next">next ></a>
</div>
</div>
This is a special class of the Y.SlideshowAnimated, Y.SlideshowPanned. It slides around the underlying layer that holds the slides ('container' div in this example) so the visible one is in the upper left corner. An element that limits what is visible ('viewer' div in this example) is also needed if you only want one slide to be shown at a time.
The arrangement of the slides is completely dependent on the html/css defined on the page. This example is a 3x3 grid, but they could be lined up horizontally, vertically, or spaced randomly around on the container div.
The CSS
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slideHolder {position: relative; height:212px; width: 393px;}
.slide { display: none; position: absolute; }
.slide.current { display: block; }
.inactive {color: #ccc; cursor: default;}
.current {font-weight: 700;}
.slideshow.panningSlideshow {width: auto; height: auto;}
.panningSlideshow .viewer {position: relative; width: 393px; height:212px; overflow: hidden;}
.panningSlideshow .container {width:1179px;height:636px;position: absolute;}
.panningSlideshow .slide {display: block; float: left; position: relative;}
In this case the panning slideshow is extending the CSS of the normal slideshow but adding in the 'viewer' and 'container' css and making all the slides visible by setting the display to be a block.
Images courtesy of Jim Knox's Wild Zoofari