SlideItMoo - Thumbnail / banner slider with MooTools 1.2

Fancy good looking way to display the thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.

Prerequisites for this example:

  1. MooTools 1.2 core and MooTools 1.2 more - visit mootools.net
  2. * Slimbox 1.65 - visit homepage

Tested on:

Installation:

  1. insert into the <head></head> section of your html document the CSS ( from styles.css the section between /* thumbnail slider begin */ and /* thumbnail slider end */ ) and JavaScript files ( mootools-1.2-core.js, mootools-1.2-more.js, slimbox.js and gallery_slide.js )
  2. add the HTML code contained between <!--thumbnails slideshow begin--> and <!--thumbnails slideshow end--> to your page

For best results, please make sure that all your thumbnails have the same size.

Demo 1 - thumbnails slider, only links:
Use the forward - back buttons or mouse wheel.

Demo 2 - thumbnails slider, div containers:
Use the forward - back buttons or mouse wheel.

Demo 3 - banner rotator:
On mouse over the slider stops.

*It is not neccesary to use Slimbox to dislplay the full image. You can use other Lightbox script written with MooTools 1.2 or write your own.