Sometimes, We Write Stuff...
Mootools Content Slider With Intervals
Due to the amount of redundant questions about old versions of the content slider, I've deleted the old versions from my site (such as this one) to eliminate further confusion.
Please visit the latest version, located here: Latest Content Slider Version.
Promote This Article
+ Comments
Hi Aavan, that should be fairly easy to accomplish. I'll try to get an example of that up tonight or sometime tommorow, ok? (It's a crazy Monday over here, otherwise I'd do it this afternoon!)
Hi George, the updated version with controls is available in the next post. 
hi, it's a very nice scroller...do it only work with mootools 1.2 or can i use it with 1.11 as well? thanks
ciao, i'm tring to put this script in a mootools class, but somehow is not working... the animation for incoming slide seems to work fine, i'm aving troubles with the outgoing one... can you help me? where i'm wrong? this is my class code
var Showcase = new Class({
//implements
Implements: [Options],
inFx: new Array(),
outFx: new Array(),
timer:null,
//options
options: {
slideTimer: 5000, //time between slides (1 second = 1000), a.k.a. the interval duration
transitionTime: 1250, //transition time (1 second = 1000)
items: null, //Get array of elements for sliding
itemNum: 0
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.options.items.each(function(v, k){
this.inFx[k] = new Fx.Morph(v, {
duration: this.options.transitionTime,
transition: Fx.Transitions.Quad.easeInOut,
wait:false
});
this.outFx[k] = new Fx.Morph(v, {
duration: this.options.transitionTime,
transition: Fx.Transitions.Quad.easeInOut,
wait:false
});
}, this);
},
//a method that does whatever you want
start: function() {
//call the function, periodically (note: the interval period is defined at the top of this file)
this.timer = this.slideIt.periodical(this.options.slideTimer, this);
},
slideIt: function() {
var numItems = this.options.items.length; //get number of slider items
var curItem = this.options.itemNum;
//change index
if(this.options.itemNum < (numItems - 1)){
this.options.itemNum++;
}
else{
this.options.itemNum = 0;
}
var newItem = this.options.itemNum;
//we will set a beginning value here
//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
this.inFx[curItem].start({
'left': [500, 0],
'opacity':[0,1]
});
//no beginning values needed, since we always want to push the old item out to the left
this.outFx[newItem].start({
'left': '-500',
'opacity':[0]
});
}
});
sorry...the wrong thing in my code is here:
this.inFx[curItem].start({ ‘left’: [500, 0], ‘opacity’:[0,1] });
this.outFx[newItem].start({ ‘left’: ‘-500’, ‘opacity’:[0] });
sould be:
this.inFx[newItem].start({ ‘left’: [500, 0], ‘opacity’:[0,1] });
this.outFx[curItem].start({ ‘left’: ‘-500’, ‘opacity’:[0] });
Very nice job, Null! (I am just now reading both of your comments.)
First, glad you were able to solve the problem! Secondly, thanks for sharing your class – I know a lot of people will find it helpful!
(And I see that something weird happens when posting code in these comments... I'll get that fixed, sorry!)
I would like to know how can I add a hyperlink to control the slide_item on mouse over exemple: after slide 1 enters then slide 2 how can I click in the hyperlink and come back to slide 1? Please I need that, thank you!
@mo and Clavel: You might want to take a look at the more recent 'content slider' posts I've made here. This particular one is the most basic version...
ciao, i'm going on developping my version of your idea... but i'm a bit worried by using the absolute positioning
do you think it could be possible to have the same sliding effect without the absolute positioning, and for it, working on something else instead the left css property ?
Hi Nulll,
I'm pretty sure you could do it with relative positioning as well, but you'll definitely need to use one or the other to perform a 'sliding' effect. I just like using absolute positioning inside of relatively positioned elements, as it gives me full control of placement with any browser/OS combination.
As for using the 'left' property, again - you'll probably need to use that to achieve any style of sliding effect. (You could use 'top' if you wanted a vertical slide...)
I suppose you could also do this type of effect with margins or padding, but I think you'd find issues with certain browsers.
One question though.
When I load mine in IE, it showed 3 errors.
1) Link:284 Char:40 Error:'null is null or not an object. Code:0
2) Link:9 Char:2 Error:'null is null or not an object. Code:0
3) Link:4 Char:2 Error:'null is null or not an object. Code:0
And the error icon refused to go away on any page of my site.
Is it something serious?
Hi Alfred,
What version of IE are you using? (I'm not seeing any errors when I view the demo in IE6 or IE7.)
Or maybe it's my IE, can you see whether are there any erros on my site in your browser?
www.hungzai.com/home/
Is it possible to have this sort of thing, but instead of sliding in new ones, it just fades out the old one? Basically what you have here, but without the sliding. How would I go about doing that, if it's possible?
fff... no way to make it work out in a wordpress theme. Anybody knows why? I've checked everything thousand times...
Thanks a LOT for this script! It was just what I was looking for. I had to transfer a small application made with jQuery and the jCarouselLite-Plugin to MooTools, as it had to coexist with another MooTools application on the same website. With only small adaptions to your script, I was able to re-build the jQuery slide functions on MooTools
Total Ah ha man, great stuff. I've been hunting for this very component, so thank you much!
Also, would love to grab your feed, but I want to grab it by email. Can you send me a link to get your feed by email? That would be terribly super.
Thanks for taking the time to write this post up!
Howdy, This was a perfect slider to place it in my application, which will globally launched in about 5 months time. Thanks a lot!
There is a way to use the script with MooTools 1.11. Just edit the "interval_slide.js" at row #99 and #111. Change the the "Fx.Morph" to "Fx.Styles" and voila:)
Hi Daniel, just wanted to say thanks for this. I was able to get it running in 2 mins. Saved my day and a lot of work! Thanks
Here's a preview of your comment: