SlideItMoo v1.1 – image slider
Monday, February 23rd, 2009 in Mootools
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.
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.
401 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,
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
Leave a comment