packetcode logo
Jquery Image Slider - Part 2

Jquery Image Slider - Part 2

2994 views 2 years ago Tutorials Javascript

This is a continuation for jquery image slider tutorial. In the previous tutorial we have covered how to make the images change on auto animation. In this article we shall focus on adding front and back navigation buttons over the image to animate the them in either direction.

If you have not read the first article jquery image slider tutorial, please go thorugh it before continuing further. In the earlier one, we have covered on, how to align the images, one over the other with relative positioning and z-index,then basic jquery function to alter the images, and finally basic transitions effects. And here is the working Demo 1.1 for the pervious tutorial.

What you will learn

In this tutorial our focus will be on
  • Manual animation with front and back buttons
  • Synchronizing automatic and manual actions
  • Overlaying front back buttons on the images

Demo and Download

Have an hands on experience on the code here with the live demo. Also download a copy of the code and test it...and your feedback in the comments would be greatly appreciated.

Forward and Backward functions

First let me alter the ‘change’ function and make it two functions, one would be called as forward and the other backward. The forward function would act same as the ‘change’ function i.e. moving the images in forward direction. For now we need to implement ‘backward' function only. For this we need to think in a reverse pattern where the ‘top’ class attribute has to be moved in backward direction and on reaching the bottom most image we bring back the attribute again to first image and so on. The implementation of forward and backward are as below


//function to animate the images in forward direction
    var forward = function (){
     		var curr = $('.slides img.top');
			var next = curr.next(); 

			if(!next.length){

				next = $('.slides img:first');
				next.addClass('top');
		        
		        curr.animate({opacity: 0.0},1000, function() {
		            curr.removeClass('top');
		            curr.css({opacity: 1.0});
		        });

			}else{

				next.css({opacity: 0.0})
		        .addClass('top')
		        .animate({opacity: 1.0}, 1000, function() {
		            curr.removeClass('top');
		        });
		    }
     }
	 

 //function to animate the images in backward direction
    var backward = function (){
     		var curr = $('.slides img.top');
			var next = curr.prev(); 
			
			if(!next.length){

				next = $('.slides img:last');
		        next.css({opacity: 0.0}).addClass('top');
		        next.animate({opacity: 1.0}, 1000, function() {
		            curr.removeClass('top');
		            curr.css({opacity: 1.0});
		        });

			}else{
				next.addClass('top');
		        curr.animate({opacity: 0.0}, 1000, function() {
		            curr.removeClass('top');
		            curr.css({opacity: 1.0});
		        });
		    }
     }

Manual Front and Back

We have written the function, now lets add two buttons front and back at the bottom of the image container and for sometime let us remove the auto animation, lets do it manually, i.e. when i click ‘front button’ the image should animate forward and when i click back it should animate vice versa. For this we shall capture ‘button clicking’ event in jquery and implement it accordingly. Here is the Demo 1.2 for the implemented code.


    //capture the front click
     $(document).on('click','.front',function(){
     	forward();
     });

     //capture the back click
     $(document).on('click','.back',function(){
     	backward();
     });
	 

Automation

Manual function is working properly, now lets automate the functions by adding self executing function ‘setInterval’. To make it more organized and to avoid synchronization problems, we shall add some proper mechanism to start,stop and restart the process.

This is very critical because, when the user tries to access the manual buttons, if the auto function is not halfed then it would result in a chios. To avaoid this lets add three functions start,stop and reset, where start would set the auto function for 3 secs and stop would clear the function from memory, for this to happen we need to set the auto function declaration globally.

And finally reset function would restart the process by setting a onetime executing function setTimeout, it takes two parameters 'function name' and 'time' after which it should execute. Here is the Demo 1.3 for the implemented code.


    //global variables
    var interval, timeout;

    // function to start the auto animation
    var start = function () {
        interval = setInterval(forward, 3000);
    }

    // function to stop the auto animation
    var stop = function () {
        clearInterval(interval);
        clearInterval(timeout);
    }

    // function to restart the animation
    var reset = function () {
        timeout = setTimeout(start, 200);
    }
	 

Overlaying the buttons on the images

Lastly, buttons at the bottom is not appealing, so let us add two button overlaying on the images. Also we don't want the user to added any html for buttons as such, we gonna add them automatically from jquery. To identify the image container first add an id attribute with some random name. This id would used in dynamically created front and back buttons for unique identification.

In the script, as a first step we shall wrap the images in a class ‘images’ then add two buttons above it then make them aligned on the images using css. we need to make sure that the z-index of the buttons is above the images else they will be invisible. Here is the Demo 1.4 for the implemented code.


	//script.js
    // adding unique class to identify front and back
    var front = $('.slides').attr('id') + '_front';
    var back = $('.slides').attr('id') + '_back';

    // wrapping images with a images div
    $('.slides').wrapInner("<div class='images'></div>");
	
    //adding the front and back navigation
    $('.slides').prepend("<div class='front " + front + "'>&gt;</div>
							<div class='back "+ back + "'>&lt;</div>");
	 

 	
	//style.css
	.slides .front {
		position: absolute;
		right:10px;
		top:120px;
		padding: 5px;
		border-radius: 60px;
		width:38px;
		height:38px;
		text-align: center;
		color:silver;
		background: white;
		opacity:0.4;
		cursor: pointer;
		font-size: 30px;
		font-weight: bold;
	}
	.slides .back {
		position: absolute;
		left:10px;
		top:120px;
		padding: 5px;
		border-radius: 60px;
		width:38px;
		height:38px;
		text-align: center;
		color:silver;
		background: white;
		opacity:0.4;
		cursor: pointer;
		font-size: 30px;
		font-weight: bold;
	}	 

Wrap up

Kool! So finally we are able to design a proper jquery slideshow with navigation. In the final part jquery image slide - part 3 we shall learn how to convert the above code as a jquery plugin so that we can distrubute it across the web.

im krishna Teja, im a computer science engineer by qualification, a physics teacher by profession and a programmer by interest. I'm an expert in building visually stunning web apps using javascript, ...