SlideItMoo v1.1 – image slider
SlideItMoo v1.1 comes with some new stuff implemented in it. Those of you familiar with version 1.0, skip to download.
SlideItMoo is a banner and image slider developed with MooTools 1.2. Differences from the first version are the fact that the image slider now supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter.
Basically, you can use the script without the item width parameter, by default is null and the width of the elements is calculated by the script. For better control though, it’s recommended that you provide this value. The item width value is the width of a single item from the slider that includes any padding, margin or borders the element might have.
To make a better idea about the parameters, it’s best to show them:
- overallContainer: this is the main container id
- elementScrolled: this container has overflow hidden; it works as a mask for his content
- thumbsContainer: the slider elements container; this is the element that actually slides
- itemsVisible: number of items visible
- itemsSelector: CSS class for your slider items
- itemWidth: width of a single element (since they all have the same width) specified for the itemsSelector parameter
- showControls: displays or hides the navigation links (forward and back)
- transition: the transition you want to use (see this for more details)
- duration: transition duration
- direction: direction to slide (-1: back; 1: forward)
- autoSlide: give it a number in milliseconds and voila! it slides by itself
- mouseWheelNav: mouse wheel navigation is by default disabled. It’s up to you to use it or not.
As a comparison with the previous version, this one uses the same HTML markup excepting the fact that the itemsSelector parameter ( CSS class for the slider’s items ) MUST be provided. Also, the CSS is similar to the 1.0 version.
For best results, when instantiating the plugin, try give it a itemWidth value so that the display will look like you planned. Remember, the itemWidth must include the actual element width plus any margins, padding or borders the element might have.
Returning to the differences between versions, the previous version used Fx.Scroll to make the slide effect; this one uses Fx.Morph. The continuous sliding of the images is obtained by moving the elements before/after the current element reached.
