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
Hi,
I have a problem to display image slider in Chrome, it is only display sometimes. Not all time, I don’t know why! It work well in all other navigator.
url is http://www.3d6tm.nc
Is somebody have a solution to fix it!
thanks in advance for your help.
Greg
Tested chrome and noticed that sometimes the slider loads on the right, outside the visible area, causing the page to scroll horizontally. This has nothing to do with the slider, this is a layout problem of your page, can’t say exactly what it is. Try validating your page and see what errors you might have.
I check on Chrome Developer Tools and I found this on Slider div tag
I check in code and css there are nothing about this witdth in.
In css is:
#SlideItMoo_outer {
width:410px;
margin:10px auto 10px;
background:url(../../images/slider/fond-slider.png) no-repeat center ;
display:block;
position:relative;
padding:0px 10px 0px;
}
in slider.php is :
is for that, I don’t understand where “style=”width: 4282px;” in div tag is from !
Hi,
me again.
I think I found how to fix it.
I add straight in slider.php code style width like this and it’s working in all internet navigator; But question is still same because in Developer tools width is not 0px but 474px. Something happen in code I don’t understand.
Whatever, it’s working now!
Hi, I’m having problems too, where you repaired?
Can you please share a link to see your implementation? In Greg’s case, it had something to do with his page, not the script itself.
Constantin I still need help. I dont know what an instance is since im not english, im swedish and its translated “instans” which doesnt really help me either. Could you explain clearer what I need to do?
thanks a whole bunch!
A new slideItMoo instance would be something like:
new SlideItMoo({ overallContainer:’some other container ID’, elementScrolled:’.other element ID here’…. });
So you will end up having
new SlideItMoo({some params here for the first instance});
new SlideItMoo({other params here for the second instance});
Basically, an instance of a class is when you tell that class to start over again. MooTools is object oriented meaning that you can create objects ( it’s a programming concept ) over and over again using the same pattern. It’s like a blueprint. Here you can find a more extensive explanation if you’re interested in better understanding how this goes: Object oriented programming. Hope this clears things a little.
Yeah thanks, also got some help from another source.
But now I have another problemm Even though I’ve specified that alla pictures in the smaller slide should be 178 px the slider eats about 4-5 pixels at the right corner. This goes away if I change Item height in the instance but then my slider becomes wider as you will understand.
Its like I have to type in a larger width than the pictures actually has for it all to show in the picture furthest to the right in the slider?
ideas?
ofcorse I mean Item width not height. Have to rean my writing next time before I send.
How do I turn the continuos slide off? I want it to stop at my last picture when i press down.
You can’t, it’s the way it works and it doesn’t have an option to turn off continuous sliding.
I have a new problem. i want a slide with 5 pictures visible. I want the whole slider to be 940 pixels wide including the forward and backward button that both are 25px wide. together 50 px.
Therefore my item width is 178 px and my pictures 174 px wide to give the pictures some space. If not the the picture at the right end gets eaten.
but now my problem is that when the slider restarts for each click you can see more and more of the next slide that’s suppose to be “off camera” so to speak.
what do I do about this? please help.
ps already tried making the item width and pictures width the same, only creates other problems.
Hi Anna,
Can you please place what you already have done somewhere online where I can see it? It will work faster if we proceed like this.
Hi all,
I have a little bug which doesn’t appear on Firefox but in Chrome, Safari, etc…
I have an anchor link to “break” the slider with a call of the js function resetAll(). In all browsers except FF it doesn’t break and still keep thumbs on 1 line. Answers ?
Can you give a link to your page? It will help to better understand your problem.
how have you solved this problem?
Is there a way to make it so that the cycle isn’t continuous, rather it stops on the last thumbnail? Also, is there a way to make it so that the “back” button is invisible until it reaches the last element/thumbnail?
Thanks!
No, sorry.
Hi there,
I would like to ask how is it possible to have two image sliders in the same page. I tried to put two but the second one doesn’t work.
thank very much for your time!
Yes it is but you have to use different elements ids and create 2 slideitmoo instances:
new SlideItMoo({params for first slider});new SlideItMoo({params for second slider});
Please try it and if it still doesn’t work, put your example somewhere online and come back here with the link.
It worked just fine. Thanks a lot for the help and the precious advise!
I wish you all the best!
this script sucks coz of no proper instructions to incorporate it on your website:(
Agreed. I’ll take measures to remedy that.
Later edit:
I included instructions for installation. Please let me know if it’s clear enough.
Hi,
Constantin, I download the new script and am able to update the content of the slider on the fly without reloading the whole page. Also, pause/play works (to an extend), so that is good.
However, I encounter a few problems:
1. The pause/play only works once. If while the slider is being paused, I click on back/forward button (maybe a few times), the slider will keep sliding as if it were on auto slide, even though the pause/play button is still in “Paused” mode. At first, I thought I did something wrong with my page, but when I tried the included demo fancy-slider, I got the same problem.
2. The back/forward buttons still have to be positioned somewhere between “outer” and “inner” divs, I would like to have them completely outside of those divs. I prefer to have them next to the pause/play button which is normally displayed under the slider. Currently, to do that, I have to set showControls to 0, then create 2 buttons for myself and call the slide() function on the click event of these buttons. But I wish I don’t have to do that.
3. The third problem is when I click on one of the slides to bring up a modal popup, the slider starts to auto slide again even though I already put it in “paused” mode. This problem might be related to #1 above.
4. Another problem is that while pausing the slider, after click on back/forward a few times, them move the mouse over the slides, the slider will slide back and forth like crazy. Again, fixing #1 might fix this as well.
Thanks.
Thank you for the heads up. I’ll try to remedy the problems and update the sources. I’ll announce here when that will be ready.
Later edit:
Please try it now. The only thing that changed is the JavaScript file.
Works beautifully! Thanks A Lot!
Works perfectly and just what I was looking for! Thank you!
how to integrate with the side with mootools 1.1?
Well, the class needs to be changed with moo 1.1 functions and class structure.
hello,
SlideItMoo does not work if the javascript framework prototype from http://www.prototypejs.org/ is loaded in the html header!!!
Is there a solution?
Hi,
is there a reason why you delete my last comment?
Could you explain where the reason is that the prototype framework dismatch the slidertool?
thanks micha
Hi Micha,
No comments get deleted here unless they are offensive or unnecessary (like: thanks or things like that). Now, about your question, MooTools and Prototype don’t work together. They are not compatible. So you have to make a choice: MooTools or Prototype, sorry about this.
Hi Constantin,
great tool indeed, works great except for the “mouseWheelNav” param – it doesn’t work under my Firefox (3.6.12) – IE 8 works fine. See, I did no other modifications to the basic setup, I’ve just downloaded the script and added “mouseWheelNav: true” to “vertical_carousel.html” example options.
Any advice ?
Thanks!
I’ll have to look into this. Wasn’t aware of this Firefox issue, thanks.
I managed to fix this using information I found on this site: http://adomas.org/javascript-mouse-wheel/ (FireFox is using DOMMouseScroll event – still I this may be MooTools 1.2 issue too)
You can see my changes on lines 87 – 91 in the following file:
http://peeters.22web.net/user/files/slideitmoo-1.1_full_source_FF_fix.js
This one works with FF 3, tested with IE 8 too.
Hi, I need to hepl width SlideItMoo, that does not work in IE 8.
Thank you
Michal
Are you sure it’s IE8 the problem? If you check the demo page with IE8 you’ll see it works.
Hi ,
thanks for the script – great work. Could you explain little more how to create 2 slideitmoo with following classes.
—
new SlideItMoo({params for first slider});
new SlideItMoo({params for second slider});
—-
I would like to add two horizontal_carousel for my home page . As a beginner I have no idea how I can realize it with classes. I would be very grateful, if you can advice me in this matter.
Thanks in advance
Alice
If you open any of the html examples from the downloaded archive, you’ll notice in head the script that starts the slider. That’s a single instance for a single slider. To create another slider, you’ll need to duplicate that code with parameters suited for it to start a new slider. Of course, you’ll need to also have in your page the HTML for that second slider.
I have 3 visible slideitmoo sliders on my page that work fine. I have a 4th slider that only displays after selecting an item from a special dropdown. This 4th slider has a large set of thumbnails divided into sets with div tags. It has multiple divs within the thumbnails (for the slider) that conditionally display thumbnails based on what I select from the dropdown. For example, I select a person’s name as a dropdown item (George) and the 4th slider appears with the George div’s thumbnails in it. I scroll through all of the thumbnails for George. The George list does not really stop. I can keep clicking on the right arrow until the George list goes off into oblivion. It does not behave like the sliders that have a flat/static list of thumbnails. I then select another name from the dropdown (Fred). In my code, all of the thumbnail divs get set to hidden and then the Fred Div gets set to visible. The thumbs from the Fred div loads but the scrolling is way off and then the slider quickly, visually rewinds to 0 (the first thumb nail, and then stops working/scrolling altogether.
In my code, selecting any/another dropdown item hides all of the thumbnails for the slider and then sets the selected set (div) of thumbnails back to visible. When it comes to the list of thumbnails for a slider, is there some way to get slideitmoo to ignore or not count the thumbs that are within hidden divs? Is there some way to reset the object or its scrolling when I dynamically change the slider’s list of thumbnails?
I am basically asking if it’s possible to hide a slider, change its’ thumbnails by hiding and showing divs in the the thumbnail list, reset the slider’s scrolling, and then re-display it – all dynamically. I have it mostly working. It just behaves badly when I hide all of the thumbs and then redisplay a subset of them from my overall list. I am looking for some sort of reset or refresh that only takes into account a div with visible thumbnails, and uses the visible div in the same way it would a static list of thumbnails. Please help. I need some way to do this.
Thank you for creating such a cool object.
Note: I would really like to use resetall() for the above request if that’s at all possible. Can someone provide me with an example of how to call it for a particular container and when it’s best to make the call to the method.
I am not sure if my approach would still work, because I am not sure how/if the thumbs container distinguishes between thumbs that are hidden/shown. If it counts them all regardless, I suppose that I need a better way of loading a specific list into the container. In any event, knowing how resetall() works would be extermely helpful.
Any help would be appreciated.
Hi Jeff,
resetAll() works when for example you have a set of thumbnails inside the slider and you either replace those with other ones or add/remove elements. When this happens, after calling resetAll(), all counts get updated with the new values and the slider doesn’t need a new instance to be initialized. By setting display none on elements this won’t work because the slider doesn’t take into account if an element is hidden or not. You will have to remove completely the element from the slider to make this work.
Is it possible to make the images fade in/out over each other? I’m displaying 1 image at a time.
I can’t find any Fx.Transition about it. Anyone knows how to do this?
Thanks
Fading is not about transitions. To make an element fade, you could use Fx.Tween or Fx.Morph on opacity inside the onChange event. Maybe some tweaks needed, but this can work.
Is that something I put inside the “new SlideItMoo” ?
The below works for me now, but I would rather have it to fade. I also have other slides on the same page so I would like to use both the Sine.easeOut on one slide and the fade on another one.
new SlideItMoo({
overallContainer: ‘SlideItMoo_shelf_outer’,
elementScrolled: ‘SlideItMoo_shelf_inner’,
thumbsContainer: ‘SlideItMoo_shelf_items’,
itemsVisible:1,
itemsSelector: ‘.shelf’,
showControls:0,
autoSlide: 7000,
transition: Fx.Transitions.Sine.easeOut,
duration: 2000,
direction:1,
itemWidth:250
});
Thank you for your help. I would have continued beating my head against the wall otherwise.
Do you have an example or any documentation of how to replace the thumbnails for a slider and how to use resetall()? I am looking for documentation but can’t seem to find any. I basically have 10-11 sets of thumbs that I want to swap in and out of a slider.
Your help is greatly appreciated.
Thumbnails get replaced using basic MooTools, element.dispose() I assume, depends on what you’re trying to do. As for using resetAll, after doing a change, if for example you have this:
var mySlider = new SlideItMoo({…});
…
replacement script here
…
mySlider.resetAll();
Would happen to have examples of things like inject/dispose, for a slider?
Does somebody have a simple example that does the following?
1) Create a slider
2) Load some items to the slider
3) Remove ALL of the items from the slider
4) Load a new (different) set items into the slider
5) Reset the slider.
Another way of saying this is to replace the items for a slider on the fly.
Such an example would be most useful.
I am admittedly not competent with mootools at its core. Just trying to learn and to get something done. My only other recourse is to create a unique slider for each set of items. That’s really ugly, but it would work.
Thank you.
were you able to solve this problem.
if yes, could you please post your example?
THX!
Sorry about the delay, your comments ended in spam. Yes, placing more than one slider should work. I’ll include a working example into the downloads.
Later edit:
Ok, it’s done. The demo for mootools 1.2 has an example on how to use the slider more than once into the same page. Same trick will work on mootools 1.3 version of the script.
Are you planing to Update for mootools 1.3. A simple patch maybe.
I was in hurry asking for 1.3. After a quick look on docs, here is what is changed.
I replaced injectAfter :
if( this.currentElement == 1 && this.direction == 1 ){
this.elements[0].inject(this.elements[this.totalElements-1],’after’);
return;
}
if( (this.currentElement == 0 && this.direction ==1) || (this.direction==-1 && this.currentElement == this.totalElements-1) ){
this.rearrangeElement( this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements-2] : this.elements[0]);
return;
}
and commented out :
/* if(!$defined(this.endingElem))
this.endingElem = null;
*/
This now works as expected I think on Mootools 1.3
And this line too : Sorry for flood :(.
/* rearanges a single element for continuous navigation */
rearrangeElement: function( element , indicator ){
this.direction == 1 ? element.inject(indicator,’after’) : element.inject(indicator,’before’);
},
You can delete those comments or edit them on one.
No problem for flooding as long as you have good ideas. Thanks for sharing.
Hi
I have a problem with FF 3.x
The back (left) arrow it stays in the middle of the slider.
Works ok in IE 8. Can you please check it?
Here is the page: http://www.houseguide.gr/index_test.php
Thanks
Hi Harry,
Sorry for the delay, I’m on holidays mode, checking thinks once few days. About your problem, in horizontal.css, line 24 ( element is this: #SlideItMoo_outer .SlideItMoo_back ), put a new property: right:auto. This should solve your problem.
Hi Constantin
It works!!
THANK YOU!!!
Harry
is it possible to load the slides in a random order versus a specific order?
No, sorry about it.
Hello,
Nice script!!
I have 2 questions
1. Is it possible that the prev and next buttons will slide the items on mouseover?
2. Is it possible to let the prev and next buttons disapear when there are not enough elements to slide?
Hi Steven,
Question 1: no, sorry about it. Question 2: you could do this from your programming, meaning, you know how many elements you want to display so simply make a check, if you have less than X don’t show navs. Hope this helps, let me know.
[...] SlideItMoo – Image Slider SlideItMoo is a banner and image slider developed with MooTools. The image slider supports [...]
great tool,
is there any way to stop the infinite loop in the new version? y need to stop the slider when the last and first element are visible. thanks
No, sorry, you can’t do that.
Leave a comment