SlideItMoo v1.1 comes with some new stuff implemented in it. Those of you familiar with version 1.0,
skip to download read on. Updates have been made for more extensive usage of SlideItMoo. For the rest, some explaining. Also, the 1.0 version is available here and I’ll try to provide support for it if any needed.
SlideItMoo is a banner rotator, article spinner and image slider ( carousel ) 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. Same goes for height, for vertical sliding carousels. 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 ( similar for height ).
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
- itemsSelector: CSS class for your slider items
- itemsVisible: number of items visible
- elemsSlide: number of items to slide at once. For example, if you set this 3, when you click forward/back button or on autoSlide, it will go to the 4th element if the first in the active one.
- itemWidth: width of a single element (since they all have the same width) specified for the itemsSelector parameter
- itemHeight: height of a single element (since they all have the same width) specified for the itemsSelector parameter. This is useful when using the vertical carousel settings
- navs: navigation buttons ( forward/back button ) are no longer added from script. This enables you to style the whole slider/article spinner/carousel/… exactly the way you want and SlideItMoo will only implement functionality. navs param is divided in 2 more params: fwd and bk where fwd is the CSS selector for the forward button ( as .css_class ) and bk for the back button
- slideVertical: if this is set to true, the slider will be vertical. Remember that you need your HTML to display accordingly.
- 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.
- onChange: event that triggers every time the current slide changes. This is useful for extending SlideItMoo with extra functionality ( see fancy_slider.html in download archive )
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. One major difference is the fact that the navigation links ( back/forward buttons ) are now added manually by you in HTML and provided to the script as CSS selectors.
For best results, when instantiating the plugin, try give it a itemWidth/itemHeight ( depending on what type on slider you use – vertical or horizontal ) 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.
Script installation is pretty simple to do. Download the script and follow the steps below:
1. Open script folder and copy files: mootools-1.2.1-core.js, mootools-1.2-more.js and slideitmoo-1.1.js to the scripts folder in your application
2. Open stylesheet folder and copy the stylesheet of the slider you want in your pages ( horizontal.css, vertical.css … )
4. Right after that, start the script. SlideItMoo is written as a class so to start it, you need to create for each slider you have in your page a new class instance and wrap all that inside the domready window event
The example above is for a single slider. If you run 2 or more sliders in your page, add a new class instance, for example like this:
5. Add the slider HTML in your pages. Basic HTML would look something like this:
<div id="SlideItMoo_outer"> <div class="SlideItMoo_back"><!--slide back button--></div> <!-- container inside used for hiding the elements outisde the view --> <div id="SlideItMoo_inner"> <!-- actual elements container, usually having a width bigger than the one of SlideItMoo_inner --> <div id="SlideItMoo_items"> <!-- a single element. Duplicate this for as many times you want to hold the individual elements in slider --> <div class="SlideItMoo_element"> Here you have the element content. </div> </div> </div> <div class="SlideItMoo_forward"><!--slide forward button--></div> </div>
August 4th 2009
- new parameter (elemsSlide) available that allows sliding of multiple elements when navigating; defaults to null. Basically, if you want the slider to slide 2 or more slides at once instead of one, set this parameter to the number of slides it should jump.
January 12th 2010
- vertical sliding available. First, set your HTML to display vertically and set itemHeight:height of individual items ( including padding, border and so on ) and slideVertical:true
- navigators ( forward/back ) no longer added by script. Instead, add them into overallContainer making their display from CSS and after add the CSS selector class to navs parameter
- new method available resetAll(). When called, this will reset the previous settings and restart the script. Useful if you change slider content on-the-fly
- new method available to stop autoSlide ( stopAutoSlide() ). To start autoslide back, use startAutoSlide()
March 11th 2010
- solved bug that affected container resize when changing itemsVisible parameter
- solved bug that affected navigation when elemsSlide was > 1 and autoSlide was on
You can also try the SlideItMoo WordPress plugin if you own a blog and need image sliders inside your posts or pages.