SlideItMoo – image slider

SlideItMoo – image slider

Monday, February 23rd, 2009 in Mootools, PHP

SlideItMoo - MooTools image slider 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.

Installation

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 … )
3. In your page, between <head> and </head>, add the javascript files and the css stylesheet

<link rel="stylesheet" type="text/css" href="path_to_css/horizontal.css" />
<script language="javascript" type="text/javascript" src="path_to_scripts/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="path_to_scripts/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="path_to_scripts/slideitmoo-1.1.js"></script>

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

<script language="javascript" type="text/javascript">
	window.addEvents({
		'domready': function(){
			/* thumbnails example , div containers */
			new SlideItMoo({
						overallContainer: 'SlideItMoo_outer',
						elementScrolled: 'SlideItMoo_inner',
						thumbsContainer: 'SlideItMoo_items',		
						itemsVisible:4,
						elemsSlide:3,
						duration:300,
						itemsSelector: '.SlideItMoo_element',
						itemWidth: 158,
						showControls:1,
						startIndex:5			
			});
		}
	});
</script>

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:

<script language="javascript" type="text/javascript">
	window.addEvents({
		'domready': function(){
			new SlideItMoo({here you put your first slider parameters});
			new SlideItMoo({here you put your second slider parameters});
		}
	});
</script>

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>

Updates

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
IE: navs:{
fwd:’.SlideItMoo_forward’,
bk:’.SlideItMoo_back’
}
- 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.

Was this useful? Show your support.

digg SlideItMoo – image slider

654 comments

  1. DR2k1 says:

    Is it possible to set the continuous navigation to discontinuous?
    Thanks!

  2. Rijter says:

    Is it possible navigate to a specific element? not just to the next, instead of this I would like sliding to an element with its own id

  3. Moamen says:

    I want to use It by class not ID, I can do that ?

    I mean “overallContainer” get class not ID

    • Sorry, not with the current version. Only ID’s. You could do a little trick though. Use a CSS class and iterate on the elements found with that class. For each element, get the ID and start the script.

  4. Rainer says:

    My slider slides nicely using the transition when clicking on the fwd button, but just jumps back when clicking the back button. And I have to click the back button twice to go back one element.

    Do you have a hint about what went wrong here?
    Thank you!

  5. steve says:

    I have a slider with 6 elements that displays and moves one slide at a time.
    I have a function to start at a random slide (1-6). Whenever 6 comes up as the random number, instead of starting with the 6th slide, it starts with the first slide…. How can I fix this?

  6. minimi says:

    he he. proper way to formulate answer: “Not possible in the current version, sorry.” ;)

  7. David says:

    Hi,

    Congratulations, I think that this is better slider of the world so I’m always using it.

    I have a problem when I put a neccessary script for my such as:

    $(document).ready(function(){
    $(“#select1″).change(function(){
    $.post(“vistaProvincias.php”,{ id:$(this).val() },function(data){$(“#select2″).html(data);})
    });
    })

    If hay go out the slider my script is running perfectly. Whats is the problem? I think that is in mootools-1.2.1-core.js

    Thank you!

  8. Arthur says:

    hello everybody . I need the carousel not loop , can anybody help me ? how I see this script haven’t got so option that I can define the following .. for example circular : false

    what I have to do ?

    thanks

Leave a comment