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
I figured it out, How to add multiple sliders on one page:
* Check ur script name. It should b slideitmoo-1.1.js to work with my tutorial.
1) Add this code in ur top script:
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer1′,
elementScrolled: ‘SlideItMoo_inner1′,
thumbsContainer: ‘SlideItMoo_items1′,
itemsVisible:4,
elemsSlide:1,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 210,
showControls:1,
startIndex:1,
onChange: function(index){
}
});
This should b added below the previous new SlideItMoo
2) To add second slider, copy the exact 1st slider code and paste it where u want to show second slider.
Change ur second slider div ids in ur HTML code to new one as defined in the code above:
For example, using above code:
* These changes are for only second slider code.
SlideItMoo_outer –> SlideItMoo_outer1
SlideItMoo_inner –> SlideItMoo_inner1
SlideItMoo_items –> SlideItMoo_items1
3) Add this code in Slider.css:
#SlideItMoo_outer1 {
width:850px;
margin:0px 0px 0px 0px;
display:block;
position:relative;
padding:0px 0px 0px 5px;
}
#SlideItMoo_outer1 .SlideItMoo_back {
display:block;
position:absolute;
cursor:pointer;
width:45px;
height:190px;
bottom:31px;
background:url(slideitmoo_back.gif) no-repeat center;
left: 0px;
}
#SlideItMoo_outer1 .SlideItMoo_forward {
display:block;
position:absolute;
cursor:pointer;
width:45px;
height:200px;
bottom:25px;
right:-7px;
background:url(slideitmoo_forward.gif) no-repeat center;
}
#SlideItMoo_inner1{
position:relative;
overflow:hidden;
width:700px; /* set a display width to make the slider look good in case js is disabled */
margin:0px 40px 0px 40px;
padding:20px 12px 10px 0px;
background:url(gallery-bg.gif) repeat-x;
height: 190px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_items1 {
display:block;
position:relative;
}
#SlideItMoo_items1 div.SlideItMoo_element {
display:block;
position:relative;
float:left;
margin:0px 8px 0px;
font-size:11px;
width:197px;
text-align:center;
color:#000;
background:url(portfolio-frame-bg.jpg) top left no-repeat;
height: 144px;
}
#SlideItMoo_items1 a {
padding:0px;
margin:5px 0px 3px;
clear:both;
display:block;
padding:2px;
}
#SlideItMoo_items1 a img{ border:none; }
All done. It should work if done properly.
* If u want to add another slider, Just repeat the procedure with names changed like:
SlideItMoo_outer1 –> SlideItMoo_outer2 etc for all ids.
*This is the simplest method for people who don’t know Javascript very much like me. This will make ur code little lengthy and unprofessional.
Thnx.
I used these Slider settings and styles in CSS. U can change to one u need.
Good explanation. But there’s an easier way of styling multiple sliders the same way. In HTML change ids to class and put a different id on all elements having them. After that, in stylesheet, change #slideitmoo… to .slideitmoo… to fit the CSS class you have in HTML. After doing all this and making sure everything is OK, create JavaScript instances for all your implementations and that’s it. Something like in this example: http://php-help.ro/examples/slideitmoo_1.1_multiple/ ( see CSS and HTML for it )
LOVE THIS TOOL! Even looks great on an iPad.
One thing leaves me scratching my head. When the page is loading the first image pops up as it should… and then jumps a few pixels to the right after the load is done. Weird. Example: http://www.lor2.com/indexRevC.html
Seems to happen across multiple browser types. Am I just seeing things?
Glad you like it. About the issue, I think is because in stylesheet you have width set to 1000px on #SlideItMoo_banners_outer but your actual slides are 990px wide. Try changing width on #SlideItMoo_banners_outer (in banner_rotator.css on line 15) to 990px and see what happens.
Hmmm… Made .css change. No difference. The initial banner jumps to the right after everything is loaded. The banners are trying to tell us something. Reload the page and the banners look fine in the first pass… the next pass you can see the right side clipped in a couple of them. All banners are 990 x 50 pixels to fit perfectly in the 990 x 50 px container. Any other ideas? Thanks!!!
http://www.LOR2.com
I turned on a 1px wide border for the outer container… so I could easily see the boundry of the 990×50px box.
All banners are 990×50px so one would think each would fit in the container exactly. Notice the gap on the left side and after the first cycle of slides they drift to the right a few pixels.
Weird. Feel like I’m missing something obvious. Any suggestions?
Finally figured out the horizontal flying banner simply eats eats about 7% of the right side of a graphic once it stops. Easiest solution was to simply change the banner artwork and make sure the right 7% wasn’t used.
All is well with the world.
Thanks for a great Moo tool!
Thanks for the great slider. The functionality works great, but I can’t seem to custom size it. Is there a setting I’m missing? If I turn the borders on, I can see it layout the way I want it very quickly, then it shrinks to fit the elements. If I lower the amount of shown elements it will shrink also. Anything obvious that I’m doing wrong?
Can you please direct me to an example page where I can see what happens? As a note, the slider shrinks the display to the number of visible items set when creating a class instance. Still, please put your implementation somewhere online where I can see it and send my feedback.
Hi All – this is likely something simple I am overlooking. I have a request to put the navigation on top of the images and got that accomplished.
The issue I’m having is I want to use different sized images (230px x 325px to be exact). What i am getting is to images and links at 128px stacked on top of each other.
I did have a request to put the navigation arrows on top of the image and was able to accomplish that, and do not see where that impacts the pairs of images being displayed though.
Sample of what I’m getting:
http://lawdev.slu.edu/Scripts/slideitmoo-11/horizontal_slider_SLU.html
I have itemsVisible:1 on page…
Any ideas?
Thanks – Mike
skip this…sorry for the bother on it. saw what i needed right after posting!
Thanks
After SlideItMoo is instantiated with “new SlideItMoo (…”, how can I access it? I want to call the stopAutoSlide method so that I can pause the slider when a “mouseover” event happens on another element on my page. Can’t quite figure this one out. Please help?
Hi Matthew,
When you create an instance, you should do it something like this:
var mySlideItMoo = new SlideItMoo(...);After instantiating the class, you can access the methods like this:
mySlideItMoo.methodName();For example, like you asked, if you want it to stop, you do something like this:
var mySlider = new SlideItMoo(...);$('myElement').addEvent('click', function(e){
mySlider.stopAutoSlide();
})
Hi Constantin! I have setup the slider on my page successfully and its damn easy to do that. But the part that is difficult is that I am unable to control the sliding using the stopAutoSlide() function. I am posting the declarations below. Please tell me what am i doing wrong. I have tried doing t in two ways.
First Method:
window.addEvents({
‘load’: function(){
var wcclS = new SlideItMoo({overallContainer: ‘SlideItMoo_banners_outer’,
elementScrolled: ‘SlideItMoo_banners_inner’,
thumbsContainer: ‘SlideItMoo_banners_items’,
itemsVisible:1,
itemsSelector: ‘.banner’,
itemHeight: 237,
itemWidth: 149,
showControls:0,
autoSlide: 3000,
transition: Fx.Transitions.Sine.easeOut,
slideVertical: false,
duration: 600,
direction: -1
});
$(‘.banner’).addEvent(‘click’, function(e){
wcclS.stopAutoSlide();
});
}
});
I added this to the head section of the document and this gives me an error saying “$(‘.banner’) is null”.
even when all the sildeitmoo items belong to the class “banner”. Then I tried doing this:
In the heade section I kept this
window.addEvents({
‘load’: function(){
var wcclS = new SlideItMoo({overallContainer: ‘SlideItMoo_banners_outer’,
elementScrolled: ‘SlideItMoo_banners_inner’,
thumbsContainer: ‘SlideItMoo_banners_items’,
itemsVisible:1,
itemsSelector: ‘.banner’,
itemHeight: 237,
itemWidth: 149,
showControls:0,
autoSlide: 3000,
transition: Fx.Transitions.Sine.easeOut,
slideVertical: false,
duration: 600,
direction: -1
});
}
});
and moved this
$(‘.banner’).addEvent(‘click’, function(e){
wcclS.stopAutoSlide();
});
towards the end of the body section. Even then the error stays.
I even tried adding the onclick event to all the slideitmoo items(HTML A elements) using
onclick=”wcclS.stopAutoSlide();”
This did not give any errors but does not work like it should! Please help!
Try instead of $(‘.banner’) to use wcclS.elements. This should work, this is the variable storing all your banners. For example, use it like this:
wcclS.elements.addEvent('click', function(){ do something when any banner is clicked });Hi,
This is awesome. I want to change the width of the container and inner images. Do I make changes in the script itself?
Thanks,
-tejas
No, you simply style the elements inside your slider to have the width/height you want them to in CSS and pass this width/height to SlideItMoo in itemWidth and itemHeight. The script does the rest.
Would be great to know which mootools more classes are needed.
Hi Jonas,
Sorry for the delay, swamped with work. Here’s the list:
MooTools core:
* Core: all
* Native: all
* Class: all
* Element: all
* Utilities: DomReady
* Fx: Fx, Fx.Transitions, Fx.Morph
I think this should be it. Let me know if I’m wrong and I’ll double check.
Hi,
I have included SlideItMoo.js and style.css but still the slider doesn’t work.
In the installation information that is provided it is said that slimbox.js and gallery_slide.js are required.But I am unable to locate these files.
Can you please let me know if i am missing out anything.
Thank you in advance
Have you included mootools too? Regarding slimbox, please follow this link and follow the installation steps from the author’s website.
Thank you Constantin Boiangiu, I had missed out slimbox.js.
[...] at the top of the page. This really cool content and image slider is a highly customized version of Slide it Moo. This gives you everything you need to creat simple and complex slide animations with tons of [...]
I don’t want to loop the image in slide.
What should i do ?
I’m afraid that’s how the script works. Once it reaches the end, it starts from beginning, it doesn’t stop there.
Hi,
I loved your class and now I´m using it a lot, and I think that I found a possible bug, in the method resetAll(), it´s using dispose() in the nav buttons, and removing the element from HTML with this I´m getting error….
Anothe issue is in this line…
if (this.options.startIndex && this.options.startIndex > 0 && this.options.startIndex 0 && this.options.startIndex <= this.elements.length) {
because when I use start index, the image that I wanted never get in the first place… after changing worked like I needed…
I added a new option addControlsSizeToOverall: true, some times I have the nav buttons but using it in a absolute layout over and it size can´t be added to the overall so I added this option and changed this line:
if (this.options.showControls) {
to
if (this.options.showControls && this.options.addControlsSizeToOverall) {
Do you have this project into a github or code.google ?
I´m trying to implement a slideTo(index) method too…
Thanks
Hi,
No, sorry, this is not on either google code or github.
Hi,
Another question, is possible to SlideItMoo work in a non-circular mode ?
No, sorry.
[...] SlideItMoo cross-browser and nicely degradable slider plugin for MooTools 1.2 with All CSS styling [...]
Hi,
know this been ask before, but could you help to point out which css should i amend/update in order increase the width of the whole slider?
have tried to increase the width of without success.
many thanks in advance for your help
apologise for not placing a URL for my files as am working local off my desktop
You need to set width in stylesheet and pass that width/height to the script so it can adjust the slider’s size. For horizontal slider (horizontal_carousel.html), open horizontal.css and on line 55 you’ll find the single element styling. Put here whatever value you need. Now, in horizontal_carousel.html, on line 23 you have the width parameter ( itemWidth: 158 ). Change 158 to whatever value your single element has set in stylesheet ( take into account any padding/margion you used ). That would be it, enjoy.
[...] SlideItMoo [...]
[...] SlideItMoo [...]
[...] SlideItMoo [...]
[...] SlideItMoo Docs & Download → SlideItMoo Demo → [...]
Is there a setting to have the first element that is shown be a random choice of the elements available?
No sure I understand your question but there is the possibility to start from a predefined element. To do that, set parameter startIndex to the index the element you want to start from.
Hi again,
I am using fancy slider. When it slides, It goes backward and then forward. Can I reduce the distance by which it goes backward.
and Can I somehow turn the sliding to one that goes only forward with increase in speed.
Like this: http://www.e2solutions.net/
Thanks a lot for making these awesome scripts available for us.
It does that because that’s the transition set for the effect. There are other transitions also and can be set by changing parameter transition ( in fancy.html, line 23: transition: Fx.Transitions.Back.easeIn ). For a complete list of transitions, go here: MooTools transitions.
Thanks Man.
It works great.
Hey,
I found something troubling me. It’s a bug or my mistake, I don’t know. Thought U should know.
When I put fancy slider in a div and give it allign center like
It works fine in firefox and ie but in safari and crome it’s transition goes away. Only content changes in a flash.
Anyway I managed to fix it with margin:0px auto
Thanks. GOOD LUCK
Just downloaded the slider. I’m using the horizontal carousel. It works well when the images are all the same size, but could anyone tell me how to make it work with different sized images. I tried to change it and instead of sliding on one horizontal line, it pushed the other images to the line below it. So I have three rows of images. Not attractive! Any help would be greatly appreciated.
Image sizes are not the issue. All you have to make sure you do correctly is to set the same size for each thumbnail container and pass that value to the script. An online example would help to debug faster.
Great work Constantin! I love this and want to implement sliders into all of my sites now. I saw in the older version that there was a way to get the Horizontal Slider to move through images by mousing over the arrows on either side.
Is that still possible in this version?
Thanks again for this wonderful tool.
Hi David,
Really, I can’t remember right now it implicitly will do that but it can be done. I’m on a laptop right now but I’ll get back with an exact answer.
Hi im using the horisontal xlider and i works fine, but I would like to use it one more time on the side. But here comes the trouble. This time instead of one picture at a time I would now like there to be about four och five visible smaller pictures rotating.
How do I do that, have tried some things but havnt got it to work since I’m quite new at javascript. thanks
It’s quite easy. You need to create a second slideItMoo instance and give it the parameters you want for that second slider. Remember to give the new smaller sizes (width and height) and that’s it.
how do I do that? could you explain more clearly, step by step would help, exactly waht do I need to duplicate and change?
I’ve put the javascript code in twice in the site and change som settings (The body code) and created new css for it. But the page cant see it. Know I’ve done something wrong but since I dont know much about javascript dont know what.
I was just trying to upgrade from an older version and now I’m getting an error that says:
Uncaught TypeError: Cannot call method ‘getSize’ of null
I’ve compared my code to your examples and it looks like I’m initializing everything. I tried adding itemHeight, but that didn’t help.
You can see the problem on a page here:
http://coffeeandwifi.com/location/Baltimore-Coffee-Tea-10134
Not sure if I’m making it better or worse, but I have a different error now:
TypeError: Result of expression ‘this.fwd’ [null] is not an object.
Hi Robert,
If you updated to the latest version of SideItMoo, you must know that navigation (forward/back buttons) not longer gets added by the script. What you need to do is put your own buttons in HTML and pass them to the script. If you read above, under updates ( Jan. 12 ), there’s a short explanation about this.
Yes I saw the upgrade notes, but I’m confused because I have been carefully looking at your examples. Your examples work properly, but as far as I can tell the following “required” code is not used in the examples:
IE: navs:{
fwd:’.SlideItMoo_forward’,
bk:’.SlideItMoo_back’
}
If that navs parameter is required, how do your examples work without it? I have tried adding the navs parameter into my code, but it doesn’t work.
Can you provide an example showing how to use the navs parameter? I’m using the CSS for the buttons from the example horizontal.css so that should be correct. My problem must be with the navs code.
Thanks for your help. My apologies if this should be something obvious.
Sorry to be late. Had to prepare a new version for Featured articles.
Anyway, in your implementation you have showControls:1. Set it to 0 ( showControls:0 ) to make it work without the navigation links. that should do it.
Thanks Constantin, but I do want the controls (left and right buttons). With showControls:0 SlideItMoo will load without errors, but I don’t get the buttons.
With the parameters shown below SlideItMoo will not load. (The error message is listed in my earlier message.) I think my problem is the navs: parameter, but I have no idea where or how to include that, and I can’t find that parameter used in your examples.
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible: 3,
elemsSlide: 3,
duration: 300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
showControls: 1
});
Hi Robert,
You will need to have your back/forward buttons defined (in your markup) somewhere between the outer and inner divs. (correct me if I am wrong, Constantin). I encounter the same script error if I don’t have the buttons where they are supposed to be.
Hello – and first of all: RESPECT!
I really love this tool. It’s easy to work with and works perfect.
I am just wondering if it is possible to have in the same div container to different ways of displaying the images. In my case the images are on the left side, texts goes right.
Want I want is: first image left, second right and the following 3 next images again on the left.
Is it possible to add a second instance (or what ever this is called :-) ) of this code?
——————————————————-
elementScrolled: ‘SlideItMoo_info_inner’,
thumbsContainer: ‘SlideItMoo_info_items’,
itemsSelector: ‘.info_item’,
——————————————————-
I mean, for examle like a Info_item2 and SlideItMoo_info_items2
Thank you very much for this great tool.
I think I understand what you need but unfortunately it doesn’t work like that, not without you writing additional code for it to make it like that. There is a method to reset the slider and start fresh but you will need to write the script to extend it to that functionality. Under the current form, what you want to do is not possible, sorry.
Well, I found a solucion for me
It works for me, if i remove in the external css the float for the img.
Now i style the img-tag with the float left or right in the html.
Leave a comment