Today I'll teach you how to make a straightforward jQuery image slideshow. You may accomplish this task using a number of plugins, but I'll demonstrate how to do it solely with jQuery.

INSTRUCTION

Easy jQuery Image SlideShow Creation Process

The steps listed below must be followed in order to construct a basic jQuery picture slideshow.

1. Do the HTML Markup
2. Create CSS
3. Include jQuery Library and write slideshow script

Do the HTML Markup

The following HTML markup should be pasted into an index.html file's 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>

Create CSS

The styles listed below should be pasted into a style.css file 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;
}

The CSS writed above gives our jQuery image slideshow some decorations. Please note that you can make your own style design.

Include jQuery Library and write slideshow script

Include jQuery library and make the slideshow jQuery script. You can include jQuery library from server or from you own download file in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/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>

You can modify the animation time by your need. The animation time is in second.

Conclusion

As you can see from the script above, it's fairly easy to make a simple jQuery picture slideshow. You can even include additional words and links in addition to the image. But I simply used images in order to make this tutorial as straightforward as possible. Hope it's helpful. Have a nice day!

Similar Tutorials

Comments