jQuery Image Slideshow

In this tutorial we are going to display image using jQuery auto slideshow. In previous tutorial we have seen example for DIV auto load and refresh using jQuery.

We are having list of images to be displayed in a slideshow. jQuery fadeIn()/fadeOut() functions are used to show image slides one by one.

View Demo


HTML Image List

This code contains 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"/>

jQuery Slideshow

This function show and hide the list of images in a periodic interval by using jQuery fadeIn() fadeOut().

$(document).ready(function() {
	setInterval(function(){ Next($('.slide:visible'))}, 2400);

function Next(slide) {
	if(typeof slide.next().attr('src') !== 'undefined') {
	} else {

View DemoDownload

This jQuery code tutorial was published on February 13, 2015.

↑ Back to Top