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.
654 comments
The horizontal carousel works well, except click the forward or the back buttons, the image jerk as it is scolling. I have it set to scroll 3 at a time. I even played with the duration and it still seems jerky
Demo page with your installation somewhere? Would help a lot.
what does it means “set your HTML to display vertically…”
i can’t understand where i should operate in my css
in load.js i modified code in this way without success:
itemsVisible:1,
elemsSlide:4,
duration:300,
slideVertical:true,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
itemHeight:500,
It means you should make the containers and inner elements being scrolled to be displayed one under the other. If you simply tell the script slideVertical:true it will simply change the slide direction from left-right to top-bottom. Inside the archive you downloaded there’s a file called vertical_carousel.html. Take that one as example (css for it is inside stylesheet/vertical.css).
Hello –
Where do I find the legal values for the “transition:” parameter…In the demo you use:
transition: Fx.Transitions.Bounce.easeOut,
What are the other available values that can be used???
Many thanks, Rick
Here’s the complete list from MooTools docs: http://mootools.net/docs/core/Fx/Fx.Transitions
[...] SlideItMoo (MooTools) [...]
I am trying to add the slider to a page on my website (built in drupal) One slider works fine, but the .js seems to not be working on the second one… here is my code:
window.addEvents({
‘domready’: function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 160,
showControls:1,
startIndex:5
});
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 160,
showControls:1,
startIndex:5
});
}
});
Note: it does not solve the issue when I give the second slider different IDs
What is wrong with my code?
Thanks,
Mike
Hi Michael,
Here is an example on how you can make what you ask for. I made the example using only the horizontal slider but you can make an idea about what I tried to do. Some notes:
1. I changed the styling in stylesheet from ids to classes
2. The ids of the 3 elements needed by the script (inner, outer and elements containers) are now modified to SlideItMoo_inner0 (for the first slider), SlideItMoo_inner1 (for the second one) … This allows automation of the script by selecting the sliders using a CSS class selector (.slideitmoo) and starting the script for each one.
Let me know if you have other questions.
Great tool!
But I’m having a problem when using it in in joomla 1.6 with MenuMatic. My MenuMatic refuses to work correctly with the mootools-core-1.3.1-full-nocompat.js. Any idea where the conflict is produced?
Can’t say. Try installing Firebug in Firefox if you don’t already have it and see what errors pop out.
Hello,
i have the same problem here. Your script works fine with the 1.3.2-nocompat, but the core errors out with the 1.3.2-compat. FireBug shows this error:
(Element.Styles[property] || “@”).split is not a function
This should be line 3973 if you load the “mootools-core-1.3.2-full-compat.js”.
exactly the same problem here. :(
As I said, I don’t have any spare time right now. Will try and release an update for this script but can’t say when will that happen.
this error message disapears by using mootools 1.4.0
I see the error message from mootools-core using 1.4.2 nocompat:
Error: (Element.Styles[j] || “@”).split is not a function
this line be ye problem:
$(this.options.thumbsContainer).setStyles(s);
replace be it with:
if( this.options.slideVertical ){
$(this.options.thumbsContainer).setStyles({‘margin-top’: -this.elementHeight});
}else{
$(this.options.thumbsContainer).setStyles({‘margin-left’: -this.elementWidth});
}
thar be working! Arrr!
How do you set mouseWheelNav ? I set it to true but not working
Simply pass as paramter mouseWheelNav: true. It definitely works, just tested in FF5 and all is OK. Do you get any errors when you try to set wheel navigation to be on?
I use autoscroll. Is it possible to stop the slide when I hovering the whole slide ? When I hovering the elements (.SlideItMoo_element) the slide stops but when I hovering the scrolling arrows in order to slide manually, the slide turns. That’s not practical because the slide auto starts !
In a brave new world, the slide would stop when I click on the scrolling arrows and this behavior would be configurable in options list (eg : stopOnManualScroll: true) but I would be happy if my previous paragraph is possible. I tried to modify the code by myself, I only succeed to stop the slide on the first hovering (i’m a javascript/mootools beginer, you developped slide it moo using classes, it’s too difficult for me at the moment !)
I’m using the mootools 1.2 version (because of the CMS I use).
Thanks !
Yes, there is a way you can do this and you don’t need to change the script itself. When you start your script instance, do it like this:
var mySlider = new SlideItMoo({...})
Now, on the same element ID you have set as overallContainer, set some mouse events like this:
$('your slideItMoo outer container ID').addEvents({
'mouseenter': function(){
mySlider.stopAutoSlide();
},
'mouseleave':function(){
mySlider.startAutoSlide();
}
});
This should do it.
Hi,
The new js is good.
One request..
In the horizontal_carousel.html,
I need the slides to move automatically and that too very slowly and on hover of the slide the slide should stop.
When i hover the mouse on the left and right arrows, the slides should move fast, but the autoslide should be thrice slower of the left and right hovering. Is it possible?
Awaiting your reply and thanks for this carousel.
Hmm, I know what you mean but I have to test this. Unfortunately, right now I don’t have the time for an update of SlideItMoo but will think of this when the time will come.
Hi,
I use slideitmoo-11 with mootools 1.2
Everything wortked well until Iinstall Firefox 5. When I click on thumb slimbox start to open but stop and never load a picture!
Any help will be really appreciate.
Thanks in advance
Hi Greg,
SlideItMoo is a separate script from the lightbox script. As long as the slider is doing his job (meaning sliding items inside it) it’s all fine with SlideItMoo. As for your images not loading, I suggest you talk to the author of the plugin you use for that purpose.
Hi,
I update mootools from core 1.2.1 to 1.2.5 and everything was fixed.
Thanks to have shown me the way !
Hey,
I love your plug-in!!!!!! I have it on my site now and it look awesome! onequestion though. How do have it not show the text above. I just want the images :)
Thank you so much!!
You’ll need to do some editing to do that. For example, in smoke theme, you need to edit display.php and remove all code that outputs the text into the slides.
hmmm, so this wouldn’t be edited in the actual plug-in file? It would be somewhere in my theme file? I dont have a display.php, do you know of another location or line of code for this?
Thank you very much!! :)
GOT IT… I went into my themes “style.css” and added.
.SlideItMoo_element strong {
display: none;
}
That works also:)
Oh man, just realized I made a huge mistake. Thought your comment was on Featured Articles Lite. Sorry about the confusion. The text above the images is displayed inside the strong element. Just delete it and you’re done. You’ll have to remove it for all elements.
When using mootools core 1.3.2-compat, the back button doesn’t trigger the onChange event, because the core errors out. When I switch it to 1.3.2.-nocompat, it works fine. However, I have an admin and mediabox that relies on compat and errors out with nocompat. Any suggestions or advice?
From what I remember, I solved this problem with compat/nocompat. I might be wrong though, there are many scripts here plus extra work I do so… Tomorrow I’ll try and have a look and get back to you with some explanation.
I have the same problem :( my content management system is still using mootools core 1.3.2 combat – slideitmoo has an error with this version. can you modify the slider so it works with the combat script of mootools 1.3.2?
thanks,
andi
Hi first thkx for your script !
allwork good (slide, pop up ajax with slimbox) except one thing
i have modified this code :
window.addEvents({
‘domready’: function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:4,
elemsSlide:1,
duration:1000,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 240,
showControls:1,
autoSlide:2000,
startIndex:1
});
}
});
http://www.maousse.com/maousse3/
and if you look this link in firefox i have 1 lign with my 4 item
and in IE i have 2 ligns first 4 and second 1 item
whats wrong please
I see IE8 displays correctly. You probably need to tweak you CSS a bit more.
I’m having problems with IE9. When I view the demos on your page (http://www.php-help.ro/examples/slideitmoo_1.1/) the first demo has no slide buttons, all 10 items display in a single box. If I put IE9 into compatability mode then it works fine. I’m having the same problem on my site.
Any ideas?
Not yet but will investigate. Thank you for reporting the issue.
I found that if I replace the mootools.1.2.1-core.js with mootools-1.2.5-core-yc.js from the mootools site, then the slider works again with IE9.
Is the index beginning with 0 or 1?
I have generated 14 elements, but i get the first element with the index=14.
Any ideas?
thanks
Jack
0 is the first index.
Hello Constantin
With the startIndex 0 or 1 i get the first element, but i don´t get the last element.
With startIndex: i change the elements, index 1 – 13 works fine, but with index 14 i get the first element.
When i start with startIndex 0, i have the same problems.
What am I doing wrong?
Thanks for your help.
Jack
After with “startIndex:”, i call the index via php after a request to get the right element.
i have a big problem… i m not an expert with javascript or mootools.
i have a website that load MooTools Core 1.3.2 with compatibility but this component work with MooTools Core 1.3.2 without compatibility. If i try to use with the first one doesn’t work.
what i have to do???
thanks
i m speaking about SlideItMoo for MooTools 1.3
I’m sorry but currently I really don’t have any spare time to look into this. Will try and find a solution for it but I can’t say when will that happen.
Is there a way to jump directly to an index?
If I’m using the fancy_slider as an example, there are forward and backward buttons, but would it be possible to add a button that goes directly to the start, or to a specific index point?
Thanks
startIndex param should allow you to do that. Indexes start from 0.
But how to call startindex when the slider is already running?
Lets say I have a slider with 10 images, one visible at a time, auto sliding from 1 to 2 to 3 etc. Under that I want a list “1. Fish” “2.Ball” etc, so if you click on “2″ and the slider is currently showing image 5, it should jump to image 2.
Making the html is no problem of course, and adding a click handler to them with mootools is also no issue, I can get the current element shown with: alert (sMoo.index);
would the command to make it jump be something like sMoo.startIndex = 2; ?
Thanks again,
Mat.
correction, to show the current index it’s this: alert (sMoo.currentIndex());
I’m still experimenting with a way to set it.
I have a strange problem (well, it’s kind of solved now, but in a weird way). I have 200 items. When I set startIndex = 0 or 1, first item is first. But begining from startIndex = 2 sum of startIndex param and real start index is always equal to 202 (when I set startIndex = 10 192nd item is first; for startIndex = 100 first is 102nd item etc.).
and one more thing: is it possible to disable looping?
No, the slider is on infinite loop. It doesn’t stop when it hits the last element.
I don’t think I really get it so I’ll try and explain how it works maybe you can make a better idea. Let’s assume you have 10 elements in your slider. You set elemsSlide to 1, when you click forward or back, the slider will go one element in that direction and the index for onChange event returns that index. Also note that indexes start from 0 so our first index in this example is 0 and last is 9.
Now, if you set elemsSlide to 3, startIndex 5 (6th element in visual mode) and hit back or forward, onChange event will fire 3 times, once for each element set on elemsSlide.
I know how it works (or at least how it should work). The problem I described is about startIndex not about changing index value while moving back or forward.
I have 200 items. They are in alphabetical order, so I know, which is 1st, which is 2nd etc. But I think it’ll be easier to describe the problem on 20 items with names like A, B, C, D etc (last is U).
So, when I set startIndex = 0, A should be first. And it is. But when i set startIndex = 1, still A is first, not B. But really funny part begins with startInex >= 2. For startIndex = 2 first is U (not C), startIndex = 3 first is T (not D) etc.
Can you please help? I got slimbox to work on my client test site but I can’t seem to get the slideitmoo to actually slide. Can you tell what I am doing wrong?
http://www.studio26-client.com
Check your page, you have mootools in there twice. Also, Slimbox isn’t working quite well, at least not on Firefox 6.0.2.
This is great, thanks so much! Is there a way to add a text description to the graphics that are sliding short of making it part of the graphic? Thanks – Joe
The image you display can have text in it, sure. And the individual elements can have titles and stuff like that. Please be a little more specific, what exactly are you trying to do?
I just want to put a brief description (a couple of sentences) below the photo.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Mon, 24 Oct 2011 21:56:00 UTC
I get this error when I load a page in IE9, (this includes all of the demo pages on this site), is this not compatible with IE9, or is my IE9 busted?
Message: DOM Exception: INVALID_CHARACTER_ERR (5)
Line: 105
Char: 71
Code: 0
URI :http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider//script/mootools-1.2-core.js
Any Help is appreciated
To make it work for Mootools 1.4 replace these lines:
var s = new Hash();
var fxDist = 0;
if( this.options.slideVertical ){
s.include(‘margin-top’, -this.elementHeight);
fxDist = this.direction == 1 ? -this.elementHeight : 0;
}else{
s.include(‘margin-left’, -this.elementWidth);
fxDist = this.direction == 1 ? -this.elementWidth : 0;
}
To these:
//var s = new Hash();
var s = {};
var fxDist = 0;
if( this.options.slideVertical ){
//s.include(‘margin-top’, -this.elementHeight);
s = {‘margin-top’: -this.elementHeight };
fxDist = this.direction == 1 ? -this.elementHeight : 0;
}else{
//s.include(‘margin-left’, -this.elementWidth);
s = {‘margin-left’: -this.elementWidth };
fxDist = this.direction == 1 ? -this.elementWidth : 0;
}
Hello,
it’s possible with a simple change not to slide but to fade in?
Thanks and good night!
Mic
Sorry to say but no.
ok thanks for your fast reply =)
Hello,
I have a new question, mayby you can help me? On your startpage is a simular slider like this one but with a nice fide and slide ; ) effect. Can I realise this too with this slider?
Thanks again!!
Michél
Hi and thanks for a great tool!
Is it possible to set the width to 100%, so that there’s no space between the horizontal slider and the browser-window – no matter which size it has?
Thanks.
Sorry but that’s not possible. The script is made in such way that it adjusts the size to the number of elements visible.
Even if the size was a variable, like “window.innerWidth * numberOfElements” or something?
Hi Constantin,
Thanks a lot for this nice plugin.
However I experienced some strange behaviors when playing with the parameters.
For instance, if I set the elemsSlide to 1 instead of 3 in the demo_1, the elements are sliding continuously once I click on the next or back button.
Thanks for your help.
Can you paste here all params so I can test? Can’t say what’s going on. What version are you using, for MooTools 1.2 only or 1.2+?
I just created a clean demo 1 locally from this page:
http://www.php-help.ro/examples/slideitmoo_1.1/
by removing all the unecessary stuff.
The script is working properly (no javascript error) but not the way I expected it to work ;-)
I can email you the demo package if you like?
Hi Constantin,
Your slide() method is recursive and the recursion stopping condition works only if the ‘endingElem’ property is defined. If the ‘elemsSlide’ option is set to 1, the ‘endingElem’ property is not initialized and the recursion never stops. In your script, changing this condition ‘this.options.elemsSlide>1′ by this one ‘this.options.elemsSlide>0′ in the if statement at line 114 solves the problem.
Hi,
Great tool, thank you!
After the last picture, Is there a way to loop to picture 1 without seeing all the pictures scroll back?
Mike
Sorry but no. When you reach the end, first picture is actually last in line.
Is there any chance when it gets to the last picture, to slide back at the same speed instead of going fast to the first?
Thanks
Mike
Hi there,
The transition is applied on a per-element basis.
When multiple elements are slided, I would like to see the transition applied to these multiple elements as a whole (one shot) and not to each element individually.
How can do this?
Thanks.
Leave a comment