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.
Related posts
Was this useful? Show your support.
636 comments
Can you please point me to a demo page? What browser have you used when testing? Usually, this behavior is due to bad css styling.
Thanks Constantin for getting back to me. Its in this page http://melbournediamondimporters.businesscatalyst.com/diamondjewellery.htm, the footer as well uses mootools. The problem with the footer is that it can’t continue flowing it will stop per item. On the other hand, the ring images runs hovering the arrow , it actually runs but it will stop eventhough the mouse is still on the arrow.
For the second slider you have on your page: you have timeout between slides. It’s how the script works. This is controlled by autoSlide if you use the auto slide feature. Play with that variable’s value and see what happens.
For the first slider, you changed from click to mouseover. The script works like this: click once, slide once. If you change click to mouseover, mouseover once, slide once. To make it slide again, mouseout, mouseover again, slide once. It’s how the script works, nothing wrong with it.
for the third image slider with news whats the code
If you’ll download the demo, JavaScript is between lines 40-53 and HTML between lines 196-225 in index.html.
Great code. Is there a way to do more than one slider on the same page? I’ve tried and the only way I’ve been able to do it is: copying the first one and changing the IDs, copying and pasting the css and renaming the copied part to match those IDs, and adding another section of javascript for a new slideitmoo.
Thanks again.
Thanks for your good job. Great Script.
But is this a bug or a feature:
Change the option elemsSlide to 1 in your demo script (thumbnails example, line 20 index.html), click the forwardbutton and then the sliding never stops (FF, IE, safari). I expected only a slide of one element.
Thank you
Hi,
This seems to be working really nicely, except in IE I get a javascript error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET CLR 3.0.30729)
Timestamp: Tue, 29 Sep 2009 15:25:19 UTC
Message: ‘null’ is null or not an object
Line: 37
Char: 3
Code: 0
URI: http://localhost/smh/script/slideitmoo-1.1.js
This seems to point to thie following line:
this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
The variables I’ve set in the header are:
options: {
overallContainer: 300,
elementScrolled: 300,
thumbsContainer: 3,
itemsVisible:3,
elemsSlide: 100,
itemsSelector: 300,
itemWidth: 130,
showControls:1,
transition: Fx.Transitions.linear,
duration: 800,
direction: 1,
autoSlide: false,
mouseWheelNav: true
}
I realise that some of those values are nonsense, but I’m afraid i really can’t find any good documentation that explains the relationship between those options and what they do, and what precisely they mean.
Can you at least advise what’s going on with that error?
Error can be seen on http://greytrilby.no-ip.org/smh/books.php
Ta
On the page you gave as example, you have that error because thumbsContainer should have as value instead of 3 the id for the slides container, in your case SlideItMoo_items.
And you’re probably right about docs, I should add some more explaining.
Thanks Constantin,
I think I’ve confused the issues here slightly.
The values I posted above are from the slideitmoo-1.1.js script. In Books.php I have:
[books.php]
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 120,
showControls:1});
},
I’ve also reverted slideitmoo-1.1.js to the original:
options: {
overallContainer: null,
elementScrolled: null,
thumbsContainer: null,
itemsVisible:5,
elemsSlide: null,
itemsSelector: null,
itemWidth: null,
showControls:1,
transition: Fx.Transitions.linear,
duration: 800,
direction: 1,
autoSlide: false,
mouseWheelNav: false
},
Any more thoughts please? I’m afraid I’m stumped (and don’t really speak javascript!)
Another problem, and I see that someone earlier worked out how to do it, but it’s beyond me!
If I bring in one instance of the slides, I can make it work, but I’m going to need to create 5 or 6 instances and render them dynamically (pulling info from a database to populate the image fields for each slider)
I copied the code, changed the IDs to classes, but I can’t see what do do next, and now neither of the two is working!
Very nice script! Hi! I tried to play with the Autoslide value in order to make it slide continuosly, without breaks, but i failed. If I put a value lower than 50(ms), the sliding will pause for a very long time. Why? Will something change if I set ‘true’ or ‘false’ as value for the Autoslide parameter?
Thanks a lot
Hi, I am having issues centering the slide box in the middle of the browser window, horizontally works but vertically does not. The offending element its the float:left within the #SlideItMoo_items div.SlideItMoo_element {
I just don’t know how to make it work without it? And I’m also unsure why the float would destroy the center align code. Any insight would be most appreciated.
http://studiobureau.org/labs/answers/
http://studiobureau.org/labs/answers/css/styles.css
Thank you.
@Toby
In your page you copied the whole script from my example page in your header. Every new SlideItMoo(…) is an instance for the class. Your page uses all 3 examples but displays only 1. Remove the instances you don’t use and everything will be just fine. Each example has a small comment above it saying what is manipulates. Remove banners and info rotator ( basically the whole load{} thing and the comma before } for domready event )
@ildiavolo
What do you want to do? autoslide and duration are somehow linked. Autoslide controls how much time an element stays on stage and duration is the effect duration time when changing slide.
@Sebastian
Your request is not related to this script. Try some of these possible solutions
@seven
It’s something I missed. When the script was developed, I made it slide elements one by one. Then, people asked for more than one element at a time. I did that but also preserved the default functionality. Basically, you should never set elemsSlide to 1 since it’s default behavior. Never thought someone will :) Anyway, I’ll add a condition to make it work even is you set it to 1. Thanks for the heads up.
Hi Constantin,
Thanks very very much for you help – second iteration now working – need to work out how to write that from db entries now!
Slight problem though – doesn’t seem to work at all with 2 iterations in IE7 – fine in FF & IE8, but IE7’s a no-go, just get long columns. I know I’ve got a problem with my nav in IE7, any ideas what’s missing for your slides?
Should add that the greytrilby entry is mine – didn’t notice the name change for some reason!
Hi, It is related, because the code I am using centers everything but it will not work on your container unless I remove the floating element, which of course makes your whole slider not work.
Well, I tried some other methods, and found that this one does work.
Cheers.
http://www.kirkdesigns.co.uk/vertically-and-horizontally-center-div-using-css
nice – which element in the slider did you apply it to?
@Sebastian
Thanks for sharing, looks like a very good solution.
@Toby
I suppose you need to apply it to the outermost container. Haven’t tried the technique yet.
Thanks – I’ll take a look at that.
Still getting that java error in IE tho – IE7 reports as line 38, IE8 as line 37 – any more thoughts?
Ha – finally sussed it – hadn’t closed off one of the events. For anyone else having the problem note that the js for new SlideItMoo has 3 pairs of braces.
window.addEvents({… needs its closing })
‘domready’: function(){… needs it’s closing }, which is what I was missing!
new SlideItMoo({… needs its closing }) (which actually is there after ’showcontrols=1′
Hi, please tell me how i can get more than one working slider on a page. Cheers
You simply add a new class instance. Look into the demo files you downloaded, there are 3 different types into the same page. To start a new slider, put new SlideItMoo({parameters}). You’ll need to set different HTML markup with different id’s for each slideitmoo instance you set up..
Sorry, Constantin, I Love you but i dont understand you. Are you telling me that with new html classes i will have to style each instance in the css?
Nice to know I’m loved :)
No, this is not what I’m saying. Maybe I haven’t used the right words. You need to give the script for each instance a different id. You can style the slider by using css classes and give them separate ids so you can have multiple instances. To make a better idea here’s and example: multiple SlideItMoo instances
The trouble is I want each instance to look exactly the same. the only thing that would change are the ‘a href ‘ links in the html.
Constantin Boiangiu,
Thanks a lot for sharing this. great module!!! earlier it was moving one by one image but now its moving three by three thats what i wanted. So i came back and check again(yeah i was using the same module) and to my surprise now its moving three by three.
you saved my lots of time
once again thanks a lot! :)
Nice script. It would be really helpful if you included an option to make the carousal scroll vertically (up or down) as well.
Could you please tell me what is causing this JS error?
TypeError: Result of expression ‘$(this.options.thumbsContainer)’ [null] is not an object.
/js/slideitmoo-1.1.js:37
Thanks,
Amy
You probably don’t have element id from parameter this.options.thumbsContainer in your page. Check what element id you set on this.options.thumbsContainer and see if it’s in your HTML.
Hello Constantin,
I want to ask you something here. right now slider is moving in circular format. like 1-10 images then again 10-1 images. but can we make it something like when i will be at 8-9-10th images container my forward button should get disable. and same with backward button when i would be at 1-2-3 images,should get disable.
Can we do that? please tell me.
Thanks.
hello again,
I have tried to changes your code from this
http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-image-slider-slideitmoo/
to this new slider. but its not working. i want it should disable the forward/backward button if its on last/first image. like you have done in the mentioned link.
could you please tell me how can i get that with this (present) slider as well.
please help me.
Thanks.
Well, probably you should count the sliders and see if it’s the last one and disable click… but it’s kinda pointless. I mean it’s continuous, why should you disable navigation?
Thanks for your reply Constantin
If there are 10 images or lets say less images that time it look good to keep it continuous. if i have more than 30 images then it could me better to keep navigation disable at the end or start. Can we do that?
Leave a comment