jQuery Image Slider
by Vincy. Last modified on July 12th, 2022.
In this tutorial, we are going to see an example of image slider using jQuery. In the previous tutorial, we have seen already how to run jQuery slide show.
In this example, we are using jQuery UI library to create image slider. In this image slider, we are using slide effect of this library.
HTML Slider Images
This code shows the images added to the slider window.
<div id="slider-div">
<img class="img-slide" src="1.jpg">
<img class="img-slide" src="2.jpg">
<img class="img-slide" src="3.jpg">
<img class="img-slide" src="4.jpg">
</div>
jQuery UI Slide Effect
This script uses jQuery UI library to add slide effect for the sliding images.
$.fn.startSlider = function(){
var simgderDIV=this;
var img=simgderDIV.find(".img-slide");
simgderDIV.css({overflow:"auto"});
img.css({position:'absolute'});
img.hide().first().show().addClass("active");
var iterateTickerElement = function() {
setInterval(function(){
var next = $(".img-slide.active").next();
$(".img-slide.active").hide("slide",{direction:'left'},2000);
$(".img-slide.active").removeClass("active");
if(next.length == 0) next = $(".img-slide").first();
next.addClass("active");
next.show("slide",{direction:'right'},1000);
},2000);
}
iterateTickerElement();
}
and call this script like as follows after DOM is ready
$("#slider-div").startSlider();
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.