SimpleSlide - a mootools class

The script is moved to gravita.se/script.php

This documentation is for v. 1.0.1, see source for documentation on newer versions.

Basics

This is a slideshow class which slides through elements in a defined box. The principle is very simple, you create a box with various elements in it, the script then scrolls between the elements. The script can scroll beetween any amount of elements.

Download SimpleSlide.js from Gravita.se/script

Example

(scroll) Prev Next - (fade) Prev Next - (scrollfade) Prev Next Automated - (goTo) Go to slide 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla eget sapien. Nam auctor diam nec orci. Nunc eget mauris sit amet nisi auctor vulputate. Vestibulum odio. Etiam quis nunc id sapien feugiat volutpat. Sed suscipit enim quis velit. Nulla facilisi. Praesent a est a nulla euismod pulvinar.

Documentation

XHTML

<div id='SimpleSlide' class='SimpleSlide'>
	<div>
		<div>
			<!-- Put whatever you wish in here. -->
		</div>
		<div>
			<!-- Put whatever you wish in here. -->
		</div>
		<div>
			<!-- Put whatever you wish in here. -->
		</div>
	</div>
</div>

note: The inner div is essential because the elements would not be able to slide horisontaly without it.

CSS

.SimpleSlide {
	width: 400px; /* Defining slideshow width */
	height: 100px; /* Defining slideshow height */
	overflow: hidden; /* required to hide not active elements. */
}
.SimpleSlide div {
	width: 2403px; /* Defining inner box with, must be SimpleSlide item x number of items + 3 pixels */
}
.SimpleSlide div div {
	width: 400px;
	height: 100px;
	float: left; /* Required if you want a horizontal slide. */
}

How you code the css doesn't matter as long as you follow the principle, this is just an example.

JavaScript

new SimpleSlide("SimpleSlide",{type: "scroll", direction: "forward", duration: 600});

"new SimpleSlide()" calls the class, you then input the id of the box you wish to make into a slideshow. Then there are serval options to costumize it.

type: "scroll/fade/scrollfade", // Three differnt effects.
direction: "forward/back", // Defines the slide direction.
duration: miliseconds, // Duration of the slide effect.
auto: "loop/once", // Makes the slide automatied.
time: miliseconds, // Defines the amount of time an automated slide will stop at each element.