Simple jQuery Image SlideShow

Today I will share how to create simple jQuery image slideshow, there are several plugins available to achieve this goal but i will show you how to do it using jQuery only.

You might like this Simple and Responsive jQuery Carousel Slider.

Steps to Create Simple jQuery Image SlideShow

To create a simple jQuery image slideshow, we need to follow the below steps.

Write an HTML Markup
Write CSS
Include Query Library and Write SlideShow Script

1. Write an HTML Markup

Create an index.html file and paste the following HTML markup in its body section.

<div class="container clearfix">

<div class="box clearfix">
<h2>SlideShow</h2>
<div id="slideshow">

    <div class="items active">
    <img src="images/pic1.jpg" />
    </div>
    
    <div class="items">
    <img src="images/pic2.jpg" />
    </div>
    
    <div class="items">
    <img src="images/pic3.jpg" />
    </div>
    
</div>
</div>

</div> <!-- container End -->

<h2>SlideShow</h2>

</div>

</div>

</div>

</div>

2. Write CSS

Create an style.css file and paste the following styles in it, in the head section.

body {
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
	}
.clearfix:after {
	clear: both;
	}
.container {
	width:1150px;
	margin:30px auto;
	}
.container .box{
	width: 150px;
	}
#slideshow {
	position:relative;
	height:160px;
	}
#slideshow div {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	visibility:hidden;
	}
#slideshow div.active{
	z-index:10;
	visibility:visible;
	}
#slideshow div.last-active{
	z-index:9;
	visibility:hidden;
	}

body {

margin:0px;

font-family:Arial, Helvetica, sans-serif;

}

.clearfix:before, .clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.container {

width:1150px;

margin:30px auto;

}

.container .box{

width: 150px;

}

#slideshow {

position:relative;

height:160px;

}

#slideshow div {

position:absolute;

top:0;

left:0;

z-index:8;

visibility:hidden;

}

#slideshow div.active{

z-index:10;

visibility:visible;

}

#slideshow div.last-active{

z-index:9;

visibility:hidden;

}

The above CSS is creating style for our jQuery image slideshow.

3. Include Query Library and Write SlideShow Script

Include jQuery library and write the slideshow script.

<script src="js/jquery.min.js"></script>
<script>
function slideSwitch() {
    var $active = $('#slideshow div.active');
    if ( $active.length == 0 ) $active = $('#slideshow div:last');
    var $next =  $active.next().length ? $active.next()
: $('#slideshow div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 3000 );
});
</script>

function slideSwitch() {

var $active = $('#slideshow div.active');

if ( $active.length == 0 ) $active = $('#slideshow div:last');

var $next = $active.next().length ? $active.next()

: $('#slideshow div:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})

.addClass('active')

.animate({opacity: 1.0}, 1000, function() {

$active.removeClass('active last-active');

});

}

$(function() {

setInterval( "slideSwitch()", 3000 );

});

</script>

All the images and jQuery library files are available in the download file.

Conclusion

Creating a simple jQuery image slideshow is very simple, as you can see in the above script, we can easily create a beautiful slideshow using jQuery, you can also add additional paragraphs, links along with the image. However to keep this tutorial simple as possible, i only used images.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.