Simple image slides using jQuery

Introduction

This tutorial will show you how to build simple image slides using jQuery. The images will be put into a div and one after another image will be appeared with faded automatically. The image will be disappeared with faded.

A function with time interval is set to make the image appeared automatically one after another.

Prerequisites

jQuery, HTML, Images

Add Images to div

We need the required images to be added to a div where we want to automate slide show for images one by one.

We can add images into div two ways – using jQuery or by putting all images into div.

Use any one of the two approaches to add images into div.

Using jQuery

Using jQuery we will put individual image into a div then append to the actual div which will animate for slide show.

var images = [
	'<div><img src="images/DSC_0339.jpg"></div>',
	'<div><img src="images/DSC_0348.jpg"></div>',
	'<div><img src="images/DSC_0934.jpg"></div>',
	'<div><img src="images/DSC_2057m.jpg"></div>',
	'<div><img src="images/DSC_2132.jpg"></div>',
	'<div><img src="images/DSC_2174.jpg"></div>',
	'<div><img src="images/DSC_2940.jpg"></div>',
	'<div><img src="images/DSC_4258.jpg"></div>',
	'<div><img src="images/DSC_5645.jpg"></div>'
];

$.each(images, function(i, img) {
	$('#slider').append(img);
});

We have the corresponding div in the body section:

<div id="slider" style="width: 800px; margin: auto;"></div>

Putting Images into div

We will directly put the images into div.

<div id="slider" style="width: 800px; margin: auto;">
	<div><img src="images/DSC_0339.jpg"></div>
	<div><img src="images/DSC_0348.jpg"></div>
	<div><img src="images/DSC_0934.jpg"></div>
	<div><img src="images/DSC_2057m.jpg"></div>
	<div><img src="images/DSC_2132.jpg"></div>
	<div><img src="images/DSC_2174.jpg"></div>
	<div><img src="images/DSC_2940.jpg"></div>
	<div><img src="images/DSC_4258.jpg"></div>
	<div><img src="images/DSC_5645.jpg"></div>
</div>

Create Slide Show

Now we will animate images to fade in and fade out with speed value mentioned as 2000. We are using the setInterval() function to animate the the images automatically continuously.

Download Source Code

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *