packetcode logo
Jquery Image Slider - Part 1

Jquery Image Slider - Part 1

6262 views 2 years ago Tutorials Javascript

Image slider on the homepage is a common functionality in most of the web templates… This tutorial is a detailed explanation of how to code for an image slider using jquery and html.. since its slightly length we have dealt it in three parts. Everything is done from scratch to make it easy to understand and to fork it as per your need.

Introduction

Most of the plugins available in the market are good but when we incorporate them in our webpages we face a lot of challenges, few become incompatible in code, in few the images overflow out of the container, in few the image transitions are not appealing. And customization is one of the biggest challenge, so today we shall work on implementing a front page image slider using jquery and html from scratch. There are many ways to do it, we have picked up the one which is the easiest, to keep it minimal in its implementation.

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.

What you will learn

  • Positioning with css
    • Piling up images one over another with relative positioning
    • Sequencing the slides using css z-index
  • Using jquery to bring each slide to top index in a sequence
  • Adding some transition effect

Initial Setup

To start with, take an empty html document and insert few images in the html body, then add a wrapper div and give a class name 'slides' to it..which we shall use it in the css styling.


<!-- HTML DOCUMENT -->
<!DOCTYPE html>
<html>
<head>
<title>Jquery Slider Demo</title>
<script src="jquery-2.1.3.min.js"  type="text/javascript" ></script>
 <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="slides">
	<img src="img/1.jpg" />
	<img src="img/2.jpg" />
	<img src="img/3.jpg" />
	<img src="img/4.jpg" />
</div>
<button class="back">back</button>
<button class="front">front</button>
</body>
</html>

/* style.css */
body{ padding:10px; }
.slides{ }
.slides  img{ }

Image positioning with css

The most important part here is to pile up all the images in a stack. For this, we gonna use the css positioning. we shall set the image container (class - slider) to relative and each image to absolute position so that they can be positioned with respect to the image container.


/* style.css */
/* Image Positioning */

.slides{
	position:relative;
	height:300px;
	width:500px;
	padding:20px;
}
.slides  img{
	position: absolute;
}

The images are placed with top:0px and left:0px which makes the image stick to the image container. Then all are indexed to -2 so that they are bellowing the display level.


/* style.css */
/* z-index addition */

.slides  img{
	position: absolute;
	top:0px;
	left:0px;
	z-index:-2;
}

Now lets create another class by name ‘top’ and give an index level ‘-1’ which stands above the image pile but below the display level so that it doesn’t interfere with the other template css.


/* style.css */
/* z-index for class - top */

.slides  img.top{
	z-index:-1;
}

Jquery Inclusion

Now we need to set the first image above other images..which can be done by setting the class of the image to ‘top’ and since we have given the z-index for class ‘top’ as -1 and other as -2. This current image which is set to class top will stand above the other images.


$('.slides img:first').addClass('top');

Next we need to shift the class attribute ‘top’ to next image and on at a regular interval for this we shall use javascript ‘setInterval’ function which takes two parameters function name and time interval. And i would call the function change for every 3 secs.


/* script.js */
setInterval(change, 3000 );

Now lets implement the ‘change’ function. For this first we would select the current image which is set to ‘top’ and store it in a variable ‘curr’ ...similarly we would also pick up the next element and store it in the variable ‘next’. Then we shall use the addClass and removeClass functions to change the class properties of the image elements.


var change = function (){
     		var curr = $('.slides img.top');
				var next = curr.next(); 
				//..
			}

Here we need to be careful, at some point we would reach the last image, then we need to set the class back to the first element. For this i would use the if condition to check it. Below is the code


var change = function (){
     		var curr = $('.slides img.top');
			var next = curr.next(); 
			if(!next.length){
				
				next = $('.slides img:first');
				next.addClass('top');
				curr.removeClass('top');

			}else{

				next.addClass('top');
				curr.removeClass('top'); 

		    }
     }

Transition Effect

As you can see that the images are changing at a regular interval but the transition is abrupt and its not appealing so we shall use animate jquery function to add a soothing transition effect. And we gonna implement ‘dissolve’ transition, for this, first we would set the next image opacity to 0 and slowly make it appear but changing it to 1

This works fine for the change of 'top' from first to the last image but when the last image appears next we need to set the transition back to first element. For that we shall reverse the transition by making the opacity change from ‘1’ to ‘0’ for the current element. So we are able to set the transitions properly and the image slider is working perfect...Below is the code and here is the Demo


var change = 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');
		        });
		    }
     }

Wrap up

The above is the simplest implementation of an image slider… with minimal transition effect. Hope liked it..In the next tutorial Jquery Image Slider - Part 2 we shall work on adding front and back navigation to the slider.

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, ...