Creating Slideshow With jQuery

In this article we will learn how to create a slideshow without the help of jQuery plugins and which can be run on any web browser, not leaving the site heavy and without bugs. Creating websites has been changing lately. In the 90s it was rare to see a site organized and fully standardized. Today we have one page sites (websites with only one page) and also the more massive portals. And it is not surprising that knowledge of front end has also evolved, it was once rare to see a site whose parallax effect was applied correctly. Animations as: slideshow, carousel menu, accordion, galleries etc. … are the latest trend today.

We also have several plugins available to assist us in these animations, but unfortunately due to poor implementation thereof, or poor development of these plugins, leaves our site heavy. Today we will see how to create an elegant slideshow without the aid of plug-ins.

Figure 1: Final result of the slide

The HTML5 Structure

As stated earlier , our slide will run on all browsers (browsers). Add a line of script to your HTML page, so that the html5 structure is interpreted by IE8, as this browser has limitation of the tag “<head>”.

Listing 1: Script to html5 IE 8-6

<! - [If lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
<! [Endif] ->

An html5 page will have following structure. Note that we have multiple “<img alt=”” />” tags that appear as child. Do not forget the “alt” attribute, as it will serve as the caption for the images.

Listing 2: Marking html5

<body>
	<figure id="slide">
		<imgsrc="img/01.jpg" alt="Image 1">
		<imgsrc="img/02.jpg" alt="Image 2">
		<imgsrc="img/03.jpg" alt="Image 3">
	</figure>

	<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
	<scripttype="text/javascript">
		<!--Write your script code here-->
	</script>
</body>

Your CSS markup will be simple, just put a height and width on the slide (figure) and put a “overflow: hidden”. And put on your images with absolute position and with a “display: none”.

Listing 3: Style slideshow

* { margin:0; padding:0;}
#slide {
width: 650px;
overflow: hidden;
height: 300px;
margin: 50px auto;
box-shadow: 0 0 8px #000;
position: relative;
}
#slide img {
position: absolute;
z-index: 1;
display: none;
left: 0;
}

#slide p {
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
font-family: Arial;
font-size: 14px;
background: rgba(0,0,0,0.5);
color: #fff;
}

Note that we have even styled the paragraph (#slide p), it happens that in our jQuery script, we put subtitles slide in a paragraph dynamically. Now lets go to our jQuery script, analyze line by line to get a better understanding.

Step 1: First we make the first image (the first tag <img alt=”” />) visible to the user and then immediately put a class “active” in it, which will serve to know which is the active image.

Listing 4: Display the first image

$(document).ready(function(){
	$("#slide img:eq(0)").addClass("active").show();
})

Step 2: Soon after we will add the alt attribute. After this we will add a paragraph tag in <figure> which is the first child element of the same element.

Listing 5: Creating the picture caption

var text = $(".active").attr("alt");
$("#slide").prepend("<p>"+text+"</p>");

Instead of putting the picture caption in the alt attribute, we could put the caption in a “data-description” so as not to influence the search engine (SEO).

Step 3: Now that we are done, let’s load the page, we will have a result as shown in Figure 1 above without the sliding effect:

Step 4: Now we go to our timer, it will be responsible for activating the transitions of images. We’ll set a time of three seconds.

Listing 6: Creating a timer

setInterval (slide, 3000);

Note the name slide, it will be the name of our function that will generate transitions and changes subtitle of slide.

Step 5: Soon after we will create our slide function that will do all the handling of our slide.

Listing 7: Creating the slide function

function slide () {
	// Here is the code of our slide
	}

Step 6: Next, at the outset, we will check there are more images after the active image (the image that contains the active class).

Listing 8: Checking if there exists some active image after image

if($(".active").next().size()){
	// If yes will do something
	}else{
		// If not, will return to the initial state of the slide
}

If images after the active image, we will do the following:

Hide the active image in a fade effect.
We will remove the class “active”, ie, the image is no longer active.
Let us capture the tag that comes after the image you just remove the active class, ie, the next image.
Let’s make it appear with fade effect.
Let’s now make the image that is visible to the user as active image.

Listing 9: Creating the image transition, if there is a next image

if($(".active").next().size()){
     $(".active").fadeOut().removeClass("active").next().fadeIn().addClass("active");
}else{
	// Do something
}

Step 7: If there is no image after image active, ie, we arrived at the last image, we will do the following:

Hide the active image in a fade effect.
We will remove “active” class, ie, the image is no longer active.
We will capture the first image of the set, ie, we return to the first image of slide and make it appear to fade.
Let’s make the image that is visible to the user now as active image.

Listing 10: Creating a transition image, if there is a next image

}else{
		$(".active").fadeOut().removeClass("active");
		$("#slide img:eq(0)").fadeIn().addClass("active");
}

Step 8: Now we manipulate our caption, for this we will capture the text that is inside the alt attribute, and save it into a variable.

Listing 11: Guarding the caption text into a variable

var text = $(".active").attr("alt");

Step 9: Finally we make the following animation with the caption:

Put the text that is inside the variable “text”.
Wait half a second and display the image.

Listing 12: Manipulation of the legend

$("#slide p").hide().html(text).delay(500).fadeIn();

Final Source Code

The final source code is as follows:

<!DOCTYPE html>
<html>
<head>
	<title>Slideshow</title>
</head>
<style type="text/css">
	* { margin:0; padding:0;}
	#slide { width: 650px; overflow: hidden; height: 300px; margin: 50px auto; box-shadow: 0 0 8px #000;position: relative;}
	#slide img {position: absolute;z-index: 1; display: none; left: 0;}
	#slide p {z-index:2;position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; font-family: Arial; font-size: 14px; background: rgba(0,0,0,0.7);  color: #fff;}
</style>

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
	<figure id="slide">
		<img src="img/01.jpg" alt="Image 1">
		<img src="img/02.jpg" alt="Image 2">
		<img src="img/03.jpg" alt="Image 3">
	</figure>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#slide img:eq(0)").addClass("active").show();

			var text = $(".active").attr("alt");
			$("#slide").prepend("<p>"+text+"</p>");

			setInterval(slide,3000);

			function slide(){
				if($(".active").next().size()){
					$(".active").fadeOut().removeClass("active").next().fadeIn().addClass("active");
				}else{
					$(".active").fadeOut().removeClass("active");
					$("#slide img:eq(0)").fadeIn().addClass("active");
				}

				var text = $(".active").attr("alt");
				$("#slide p").hide().html(text).delay(500).fadeIn();
			}
		});
	</script>
</body>
</html>

Replace the image names accordingly. Here I’ve placed my images in the img folder.

Summary

Well that’s all. With this example I tried to demonstrate a simple way to incorporate sliding effect in your web page using jQuery. Our slide is ready for any dynamic web system. Hope you liked the article. If you have any questions, please write it in the comments below.

The HTML5 Structure

Final Source Code

Summary

About Manisha Patil