jQuery Image Slideshow
by Vincy. Last modified on July 12th, 2022.
In this tutorial, we are going to display image using jQuery auto slideshow. In the previous tutorial, we have seen an example for DIV auto load and refresh using jQuery.
We are having a list of images to be displayed in a slideshow. jQuery fadeIn()/fadeOut() functions are used to show image slides one by one.
HTML Image List
This code contains a list of images in a div container.
<div id="image-slide">
<img class="slide" src="slides/beach1.jpg"/>
<img class="slide" src="slides/beach2.jpg"/>
<img class="slide" src="slides/beach3.jpg"/>
<img class="slide" src="slides/beach4.jpg"/>
<img class="slide" src="slides/beach5.jpg"/>
</div>
jQuery Slideshow
This function show and hide the list of images in a periodic interval by using jQuery fadeIn() fadeOut().
$(document).ready(function() {
$(".slide:first").show();
setInterval(function(){ Next($('.slide:visible'))}, 2400);
});
function Next(slide) {
slide.fadeOut();
if(typeof slide.next().attr('src') !== 'undefined') {
slide.next().fadeIn();
} else {
$('.slide:first').fadeIn();
}
}
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.