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.
Thanks for reading.