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.

View Demo

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">

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");
	var iterateTickerElement = function() {
			var next = $(".img-slide.active").next();
			if(next.length == 0) next = $(".img-slide").first();

and call this script like as follows after DOM is ready


View DemoDownload

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page