MooTools 1.2 image slider – SlideItMooThursday, November 27th, 2008 in Mootools
It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.
There are several options inside the plugin that you can set up in order to obtain the desired effect:
- visible: number of visible images ( default:5 )
- showControls: either to show the back-forward buttons ( default: 1 )
- autoSlide : automatically slide the images from your photo gallery ( in milliseconds to set the interval – default:0 )
- transition: the transition you want to use when sliding
- currentElement: the element currently selected. If you need to start the slider with a specific image, set this with the image number-1 ( default:0 )
- thumbsContainer: the id of the thumbnails/images container
- elementScrolled: the id of the container of thumbsContainer variable
- overallContainer: the id of the elementScrolled variable
Comments are closed for this version of the script. Please use the new version and place any comments/issues there.
To use it, you need to include the plugin into the header section of your page after the MooTools 1.2 framework and then create an instance of the SlideItMoo class:
Giving the fact that you can download MooTools having only the modules you need (in order to reduce file size), here’s the list of modules used by this script:
- Core: all
- Native: all
- Class: all
- Element: all
- Utilities: DomReady
- Fx: Fx, Fx.Transitions
- Fx : Fx.Scroll
The CSS styling behind all this is very simple; the only thing you need to remember is to put on the thumbnails/banners container the whitespace:nowrap property. Besides that, you can use your own id’s in your html and then provide them when you instantiate the class.