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.

Facebook Official Page: All PHP Tricks

12 Comments

Saima Hanif says:
November 26, 2020 at 3:26 pm
Thank you for your articles.
1. Javed Ur Rehman says:
  December 3, 2020 at 9:01 am
  You welcome Saima 🙂
Saima Hanif says:
November 26, 2020 at 3:18 pm
Thank you for your articles. 🙂
1. Javed Ur Rehman says:
  December 3, 2020 at 9:02 am
  You welcome 🙂
CPCI says:
September 12, 2019 at 2:04 pm
I like your tutorial
1. Javed Ur Rehman says:
  September 16, 2019 at 4:25 am
  Thanks
James masonganye says:
February 22, 2019 at 10:09 am
Good day Javed,
Thanks for the good tutorial,
I am getting the following error when trying to view the entered data from view.php
Notice: Undefined index: name in C:\xampp\htdocs\view.php on line 50
1. Javed Ur Rehman says:
  March 18, 2019 at 6:38 am
  Dear James,
  I am afraid but this tutorial does not contain any file name view.php
Vinoth says:
December 24, 2018 at 11:04 am
I’m new for php and mysqli, i create database name in phpmyadmin, but i don’t know how to handle dbuser name, db password , possible please send to my email id, i learn php from your article only. thanks a lot
1. Javed Ur Rehman says:
  January 1, 2019 at 5:02 am
  Hi Vinoth, i am glad that you found my tutorials helpful. I will be happy if you share my tutorials in your developer circle or social media. Thanks
  1. kajal says:
    February 21, 2019 at 5:30 pm
    Username/password is incorrect.
    Click here to Login
    hii sir im a diploma student im getting this error after login
    im not redirecting to the home.php
    thank ypu for the code it is very useful
    1. Javed Ur Rehman says:
      March 18, 2019 at 6:39 am
      Dear Kajal,
      Move the session_start(); at the beginning of each page it exist. Issue will resolved.