Sometimes, We Write Stuff...

Mootools Div Slider With Basic Controls

Posted in: CSS, Javascript, Mootools, Tutorials

After posting my last Mootools tutorial, I received a couple of friendly comments asking for a version with some simple controls.  That seemed like a great/useful request, especially given the fact that I wasn't sure if anyone was reading these posts!  It's been a super hectic week here, but I finally managed to get around to coding it up this weekend... Hopefully you will enjoy this and/or find it of use!

First, I should probably mention that this involves just a few minor changes from the previous tutorial, so I will only be posting those changes here.  (In other words – if you haven't read that post yet, I highly recommend you do so before continuing here.)

Overview

We are going to add 3 buttons to our content slider: a previous button, a next button, and a play/pause button.  In order to incorporate these controls into our slider, we just need to modify our code slightly and then attach the proper actions to these buttons.  To make this easier to grasp, I'm going to explain the button setup first, and then the functionality afterwards. 

The Buttons

For this example, I made a div with an id of 'controls' and placed 3 anchor tags inside with IDs of 'prevbtn', 'nextbtn', and 'playbtn'.  (I'm not going to post this code here, as you can set this up however you like...and the code is available in the demo files.)  After I did this, I went into our javascript file and declared a few variables for our new buttons.  (This just makes it easier to use these buttons elsewhere in our code, and it makes the code more readable IMO.)  It's nothing special, we're just grabbing elements by ID:

var prevBtn = $('prevbtn');
var playBtn = $('playbtn');
var nextBtn = $('nextbtn');
var isPaused = 0;

Also note that I've set up an 'isPaused' variable here, too.  This is just a flag we'll use to tell our code whether we have the auto-animation paused or not.

The Previous/Next Functions

Basically, we're going to use 2 functions – one to handle the normal motion of sliding content from right to left, and then another similar function to handle sliding the content from left to right (for the previous button.)  We already have the first one from the previous tutorial, and the function for the backward motion just involves tiny edits to how we change the itemNum (the current item) and the animation values:

var slideBackward = function(){ 

	//get item to slide out
	var curItem = items[itemNum];  
	
	//change index for reverse movement
	if(itemNum > 0){
		itemNum--; 
	}
	else{
		itemNum = (numItems - 1);
	}
	
	//now get item to slide in using new index
	var newItem = items[itemNum];
	
	
	var item_in = new Fx.Morph(newItem, {
		duration: transitionTime, 
		transition: Fx.Transitions.Quad.easeInOut, 
		wait:false
	});
	
	var item_out = new Fx.Morph(curItem, {
		duration: transitionTime, 
		transition: Fx.Transitions.Quad.easeInOut, 
		wait:false
	});
	
	
	//we will set a beginning value here too, but this time to make it come from left to right
        //note: I've added an extra 2 pixels here to fake a border between slides during animation
	item_in.start({
	'left': [-502, 0]
	});
	
	//no beginning values needed
	item_out.start({
	'left': '502'
	});
	
};
//end slideBackward

Connecting The Buttons

The Play/Pause Button

This is the more complicated of the three buttons – but thanks to a few built-in functions in Mootools, this is still easily accomplished with very little coding.  One subtle – but very important – thing differing between this version and the previous one is that I've set the interval up as a variable:

var theTimer = slideForward.periodical(slideTimer, this); 

Using this variable and the Mootools built-in function '$clear', we will make the play button stop or start the auto-animation based on the value of our 'isPaused' variable.  In addition, I've used a little trick to toggle the text (play/pause) inside the button based on that variable's state.  Take a look:

playBtn.addEvent('click', function(){
    if(isPaused == 0){
        isPaused = 1;
        $clear(theTimer);
        this.set('html', 'play');
    }
    else{
        isPaused = 0;
        slideForward();
        theTimer = slideForward.periodical(slideTimer);
        this.set('html', 'pause');
    }
 });

The Prev/Next Buttons

These are much easier to deal with.  Note that if the animation isn't paused, I reset the timer each time this is pressed.  (This is for good usability... think about it.)  Here's the code :

nextBtn.addEvent('click', function(){
    if(isPaused == 0){
        $clear(theTimer);
        theTimer = slideForward.periodical(slideTimer);
    }
    slideForward();
});

prevBtn.addEvent('click', function(){
    if(isPaused == 0){
        $clear(theTimer);
        theTimer = slideForward.periodical(slideTimer);
    }                    
    slideBackward();
});

Conclusion

And there you have it!  As you can see, with just a few simple modifications we suddenly have a totally different tool... a simple slideshow.  As always, the full code for this example is available in both the demo link and in the packaged download link below.  You are welcome to use it anywhere you like, no strings attached.  (And feel free to email or comment a link to show what you've done with this... it would make my day!)

Download/Demo