SlideShow.html

<style>
div#slides {
	width: 500px;
	height: 280px;
	overflow: hidden;
	position: absolute;
	left: 450px;
	top: 22px;
}

div#slides div {
	height: 200px;
	width: 500px;
	font-size: 40px;
	padding-top: 80px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}

.red {background: #e40053;}
.blue {background: #0094d5;}
.green {background: #43aa38;}

#events {
	position: absolute;
	top: 320px;
	left: 450px;
}

#slides p {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 3;
	color: white;
}

</style>

<div id="slides" data-slideshow="delay:2000 duration:1000 transition:fade">
	<div data-slideshow="transition:none"                  class=green>0<br> none</div>
	<div data-slideshow="transition:slideDown"             class=blue>1 (initial)<br> slideDown</div>
	<div data-slideshow="transition:slideUp"               class=red>2<br> slideUp</div>
	<div data-slideshow="transition:slideLeft"             class=green>3<br> slideLeft</div>
	<div data-slideshow="transition:slideRight"            class=blue>4<br> slideRight</div>
	<div data-slideshow="transition:pushUp duration:500"   class=red>5<br> pushUp:500</div>
	<div data-slideshow="transition:pushDown"              class=blue>6<br> pushDown</div>
	<div data-slideshow="transition:pushLeft"              class=green>7<br> pushLeft</div>
	<div data-slideshow="transition:pushRight"             class=blue>8<br> pushRight</div>
	<div data-slideshow="transition:blindUp"               class=red>9<br> blindUp</div>
	<div data-slideshow="transition:blindDown"             class=green>10<br> blindDown</div>
	<div data-slideshow="transition:blindLeft"             class=blue>11<br> blindLeft</div>
	<div data-slideshow="transition:blindRight"            class=red>12<br> blindRight</div>
	<div data-slideshow="transition:blindUpFade"           class=green>13<br> blindUpFade</div>
	<div data-slideshow="transition:blindDownFade"         class=blue>14<br> blindDownFade</div>
	<div data-slideshow="transition:blindLeftFade"         class=red>15<br> blindLeftFade</div>
	<div data-slideshow="transition:blindRightFade"        class=green>16<br> blindRightFade</div>
	<div data-slideshow="transition:crossFade"             class=red>17<br> crossFade</div>
	<div data-slideshow="transition:fade"                  class=green>18<br> fade</div>
	<div data-slideshow="transition:fadeThroughBackground" class=red>19<br> fadeThroughBackground</div>
	<div data-slideshow="transition:flash"                 class=blue>20<br> custom</div>

	<p>I'm not really a part of this</p>
</div>

<p id=events>
	<b>Events:</b>
	<span id="onShow">show</span>
	<span id="onShowComplete">showComplete</span>
	<span id="onPlay">play</span>
	<span id="onPause">pause</span>
	<span id="onReverse">reverse</span>
</p>

<script src="/depender/build?require=SlideShow/SlideShow,Core/Element.Event"></script>

<script>
// behind the scenes tests
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);
});

// tests element methods in the background
var mySlideShow = $('slides').playSlideShow({
	selector: '> div',
	initialSlideIndex: 1
}).pauseSlideShow().get('slideshow');

mySlideShow.addEvents({
	onShow: function(){ $('onShow').highlight(); },
	onShowComplete: function(){ $('onShowComplete').highlight(); },
	onReverse: function(){ $('onReverse').highlight(); },
	onPlay: function(){ $('onPlay').highlight(); },
	onPause: function(){ $('onPause').highlight(); }
});

makeActions([
	{
		fn: function(){
			mySlideShow.play();
		},
		title: 'play',
		description: 'Plays the slideshow'
	},
	{
		fn: function(){
			mySlideShow.reverse();
		},
		title: 'reverse',
		description: 'Reverses an autoplaying slideshow'
	},
	{
		fn: function(){
			mySlideShow.pause();
		},
		title: 'pause',
		description: 'Stops the slideshow'
	},
	{
		fn: function(){
			mySlideShow.show('next');
		},
		title: "show('next')",
		description: 'Shows the next slide.'
	},
	{
		fn: function(){
			mySlideShow.show('previous');
		},
		title: "show('previous')",
		description: 'Shows the previous slide'
	},
	{
		fn: function(){
			mySlideShow.show(4);
		},
		title: "show(4)",
		description: 'Shows the 5th slide by index (4). Does nothing if it is already the current slide.'
	},
	{
		fn: function(){
			mySlideShow.show(mySlideShow.slides[0]);
		},
		title: "show(el)",
		description: 'Shows the first slide by element. Does nothing if it is already the current slide.'
	},
	{
		fn: function(){
			mySlideShow.show('next', {
				transition: 'blindDownFade',
				duration: '3000'
			});
		},
		title: "show('next', options)",
		description: 'Shows the next slide with options (blindDownFade, super slow 3000ms)'
	},
]);

</script>