jQuery CSS Image Slider – Code Yourself

Filed Under: HTML

Today we will learn how to make our own jQuery image slider. This Article is a part of “Sliders” series. It’s an introductory tutorial on creating your own Image Slider using CSS and JQuery.

jQuery Image Slider

We will cover following topics in this jQuery image slider tutorial. By the end of tutorial, you should be able to create your own simple jQuery image slider.

  1. Heart of Any Website – Sliders
  2. jQuery Image Slider Pre-requisites
  3. Implementing jQuery CSS Image Slider
    1. jQuery Image Slider Basic Directory Structure
    2. One Image/Frame jQuery Slider
    3. Three Image/Frame jQuery Slider
    4. Embedding multiple jQuery image sliders on a single Web Page.
  4. jQuery Image Slider Live Demo
  5. What’s next?

Heart of Any Website – Sliders

Image Sliders or Galleries are the main front-page content for any website. It’s always a better choice to create a dynamic moving photo-gallery instead of going for a static page, flooded with Images all around. I would not say to use sliders all around your website but they certainly come handy when you have lots of images. There’re some good reasons to choose these sliders over static contents.

Advantages of Sliders

  1. Used to highlight important information.
  2. They can depict who you are and what you are all about.
  3. They are more engaging than static content and save a lot of space.
  4. To create a nice Photo-gallery.
  5. Used to distribute the information among various slides and guides the user properly.
  6. Gives your webpage a classy look.
  7. They can be linked to other websites content to show flash messages.

jQuery Image Slider Pre-requisites

This article assumes readers have basic knowledge about what is a webpage, HTML basic tags, few CSS properties and know-how of JavaScript. You can refer to the www.w3schools.com website for these topics. Those who are familiar with these stuffs can directly start with the Implementing Sliders section.

Implementing jQuery CSS Image Slider

Now with some basic background of HTML, CSS and JavaScript, we can proceed with the slider implementation. Just follow the following guidelines.

  1. jQuery Image Slider Basic Directory Structure

    jquery image slider directory structure
    Let’s organize different resources among folders in our Root directory.

    • “SimplePhotoSlider” is our Root folder having HTML files with other sub-folders.
    • “scripts” folder contains the Javascript libraries such as JQuery and some other script files.
    • “styles” folder contains CSS files defining styles of different HTML tags.
    • “images” folder contains two sub-folders for storing images of different dimensions.
  2. One Photo/Frame jQuery Slider

    One photo per frame means at a time you will be seeing only one slide. This slider will only have slides moving along with two navigation controls named “Next” and “Previous”. The layout of the slider is as shown in the figure.

    jQuery image slider Layout

    The SimpleSlider.html file has structural elements along with scripts related to creation of the object for our slider. Observe how each of the slide images is enlisted as the unordered list elements. Two files simpleStyle.css and simpleSliderScript.js contain styles and methods for controlling the slider motion and direction. You would also need reference to JQuery Library i.e. https://code.jquery.com/jquery-2.1.0.js which you can download and save in the folder “scripts”.

    Explanation of simpleSliderScript.js

    • slider() method accepts two parameters and extracts some information like no. of images in the list and width of the image.
    • The “transition” object in the simpleSliderScript.js file calculates the displacement at each move, and which is equal to width of the slide images.
    • The “setCurrentPos” object calculates the value of “current” counter after the user click on navigation buttons.
    • Based on Next or Previous button pressed, the value of current is either incremented or decremented. Also if “current” goes below 0, then it’s set to the last element in the list.

    Codes for all these files are as shown below.

    HTML Code

    SimpleSlider.html

    
    <!Doctype html>
    <html>
    	<head>
    		<title>Simple Slider</title>
    		<link rel="stylesheet" href="styles/simpleStyle.css">		
    	</head>
    	<body>
    		<!-- Container for Slider and Navigation Controls -->
    		<div class="gallery">
    			<h2>Photo Slider</h2>
    			<!-- The actual moving Slider -->
    			<div class="slider">
    				<ul>
    					<li><img src="images/bigimg/bigimg1.jpeg" class="slides" alt="Image1"></li>
    					<li><img src="images/bigimg/bigimg2.jpeg" class="slides" alt="Image2"></li>
    					<li><img src="images/bigimg/bigimg3.jpeg" class="slides" alt="Image3"></li>
    					<li><img src="images/bigimg/bigimg4.jpeg" class="slides" alt="Image4"></li>
    				</ul>
    			</div>
    			<!-- Navigation Button Controls -->
    			<div id="slider-nav">
    				<button data-dir="prev">Previous</button>
    				<button data-dir="next" style="float:right;">Next</button>
    			</div>
    		</div>
    		<!-- Loading JavaScript Codes. -->
    		<script src="scripts/jquery-2.1.0.js"></script>
    		<script src="scripts/simpleSliderScript.js"></script>
    		<script>
    			// 
    			jQuery(document).ready(function ($) {
    				// creating a container variable to hold the 'UL' elements. It uses method chaining.
    				var container=$('div.slider')
    											.css('overflow','hidden')
    											.children('ul');
    				
    				/* 
    				On the event of mouse-hover, 
    					i) Change the visibility of Button Controls.
    					ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode.
    				*/
    				$('.gallery').hover(function( e ){
    					$('#slider-nav').toggle();
    					return e.type=='mouseenter'?clearInterval(intv):autoSlider();
    				});
    				
    				// Creating the 'slider' instance which will set initial parameters for the Slider.
    				var sliderobj= new slider(container,$('#slider-nav'));
    				/*
    				This will trigger the 'setCurrentPos' and 'transition' methods on click of any button
    				 "data-dir" attribute associated with the button will determine the direction of sliding.
    				*/
    				sliderobj.nav.find('button').on('click', function(){
    					sliderobj.setCurrentPos($(this).data('dir'));
    					sliderobj.transition();
    				});
    				
    				autoSlider(); // Calling autoSlider() method on Page Load.
    				
    				/* 
    				This function will initialize the interval variable which will cause execution of the inner function after every 2 seconds automatically.
    				*/
    				function autoSlider()
    				{
    					return intv = setInterval(function(){
    						sliderobj.setCurrentPos('next');
    						sliderobj.transition();
    					}, 2000);
    				}
    				
    			});
    		</script>
    	</body>
    </html>
    

    CSS Code

    simpleStyle.css

    
    *
    {
    	margin:0;
    	padding:0;
    }
    
    .gallery
    {
    	width:640px;
    	height:370px;
    	margin:10px auto;
    	background:#999;
    	border:1px solid orange;
    }
    
    .slider
    {
    	width:inherit;
    	height:344px;
    	overflow:scroll;
    }
    .slider ul
    {
    	width:10000px;
    	list-style:none;
    	margin-left:0px;
    }
    .slider li
    {
    	float:left;
    }
    
    #slider-nav
    {
    	display:none; /* This is important to hide the buttons if jQuery is Not supported. */
    	margin-top: -10em;
    	cursor: pointer;		
    }
    

    JavaScript Code

    simpleSliderScript.js

    
    /*
    This method will initialize each slider instance.
    */
    function slider(container, nav){
    	this.container=container;
    	this.nav=nav.hide(); // This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining.
    	this.imgs=this.container.find('.slides'); // Returns jQuery object containing all matched elements.
        console.log('Value of this.imgs is : '+this.imgs);
    	this.width=this.imgs[0].width;
    	console.log('Value of width is : '+this.width);
    	this.imgLen=this.imgs.length; // Returns the total number of sliding elements.
    	/* 	Initialize the "current" counter. 
    		This counter keeps track of the index of current slide in the unordered list of elements. 
    		This will be used for calculating the required displacement.
    	*/
    	this.current=0; // Initialize the "current" counter.
    }
    
    // This method will apply the needed animation and displacement.
    slider.prototype.transition=function(coords){
    	this.container.animate({
    		'margin-left': coords || -(this.current*this.width) // First element is multiplied by Zero.
    	},500);
    };
    
    // This method will set the "current" counter to next position.
    slider.prototype.setCurrentPos=function(dir){
    	var pos=this.current;
    	console.log('Value of this.value is : '+dir);
    	// It'll check which button is pressed and accordingly increments or decrements the 'pos' variable.
    	pos+= ~~(dir=='next') || -1; // You can use alternate "Math.floor()" method instead of double tilde (~~) operator.
    	this.current=(pos<0)?this.imgLen-1: pos%(this.imgLen);
    	console.log(this.current);
    	
    };
    

    The source codes have comments wherever it is needed. In case of specific doubt you can ask me directly through comments.

    Simple Image Slider Output
    jQuery image slider, CSS image slider

  3. Multi Images/Frame jQuery Slider

    • Three Photos per Frame means you can see three slides at a time. After properly understanding the Simple One Photo per Frame slider, it should be easy to grasp new changes made in this slider.
    • A new object called “divider” is introduced between two slides which can be any image of specified dimension. So the “transition” object in the multiImageSliderScript.js file has been modified to accommodate the gap (which also includes divider’s width) between any two slides.
    • Also “setCurrentPos” object has a little change which can be easily understood.
    • As you could see from the code MultiImageSlider.html, that unordered list has been modified a little bit to add the divider between two consecutive slide elements.

    Codes for all these files are as shown below.

    HTML Code

    MultiImageSlider.html

    
    <!Doctype html>
    <html>
    	<head>
    		<title>Multiple Image Slider</title>
    		<link rel="stylesheet" href="styles/multiImageStyle.css">		
    	</head>
    	<body>
    		<!-- Container for Slider and Navigation Controls -->
    		<div class="gallery">
    			<h2>MultiImage Slider</h2>
    			<!-- The actual moving Slider with Slides and Dividers-->
    			<div class="slider">
    				<ul>
    					<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"></li>	
    				</ul>
    			</div>
    			<!-- Navigation Button Controls -->
    			<div id="slider-nav">
    				<button data-dir="prev">Previous</button>
    				<button data-dir="next" style="float:right;">Next</button>
    			</div>
    		</div>
    		<!-- Loading JavaScript Codes. -->
    		<script src="scripts/jquery-2.1.0.js"></script>
    		<script src="scripts/multiImageSliderScript.js"></script>
    		<script>
    			// 
    			jQuery(document).ready(function ($) {
    				// creating a container variable to hold the 'UL' elements. It uses method chaining.
    				var container=$('div.slider')
    											.css('overflow','hidden')
    											.children('ul');
    				
    				/* 
    				On the event of mouse-hover, 
    					i) Change the visibility of Button Controls.
    					ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode.
    				*/
    				$('.gallery').hover(function( e ){
    					$('#slider-nav').toggle();
    					return e.type=='mouseenter'?clearInterval(intv):autoSlider();
    				});
    				
    				// Creating the 'slider' instance which will set initial parameters for the Slider.
    				var sliderobj= new slider(container,$('#slider-nav'));
    				/*
    				This will trigger the 'setCurrentPos' and 'transition' methods on click of any button
    				 "data-dir" attribute associated with the button will determine the direction of sliding.
    				*/
    				sliderobj.nav.find('button').on('click', function(){
    					sliderobj.setCurrentPos($(this).data('dir'));
    					sliderobj.transition();
    				});
    				
    				autoSlider(); // Calling autoSlider() method on Page Load.
    				
    				/* 
    				This function will initialize the interval variable which will cause execution of the inner function after every 2 seconds automatically.
    				*/
    				function autoSlider()
    				{
    					return intv = setInterval(function(){
    						sliderobj.setCurrentPos('next');
    						sliderobj.transition();
    					}, 2000);
    				}
    				
    			});
    		</script>
    	</body>
    </html>
    

    CSS Code

    multiImageStyle.css

    
    *
    {
    	margin:0;
    	padding:0;
    }
    
    .gallery
    {
    	width:550px;
    	height:112px;
    	margin:10px auto;
    	background:#999;
    	border:1px solid orange;
    }
    
    .slider
    {
    	width:inherit;
    	height:100px;
    	overflow:scroll;
    }
    .slider ul
    {
    	width:10000px;
    	list-style:none;
    	margin-left:0px;
    }
    .slider li
    {
    	float:left;
    }
    
    .dividers
    {
    	margin:0 15px 0 15px; /* This is Important and margin must be same on both sides */
    }
    
    #slider-nav
    {
    	display:none; /* This is important to hide the buttons if jQuery is Not supported. */
    	margin-top: -4em;
    	cursor:pointer;	
    }
    

    JavaScript Code

    multiImageSliderScript.js

    
    /*
    This method will initialize each slider instance.
    */
    function slider(container, nav){
    	this.container=container;
    	this.nav=nav.hide(); // This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining.
    	this.imgs=this.container.find('.slides'); // Returns jQuery object containing all matched elements.
        console.log('Value of this.imgs is : '+this.imgs);
    	this.width=this.imgs[0].width;
    	console.log('Value of width is : '+this.width);
    	this.imgLen=this.imgs.length; // Returns the total number of sliding elements.
    	/* 	Initialize the "current" counter. 
    		This counter keeps track of the index of current slide in the unordered list of elements. 
    		This will be used for calculating the required displacement.
    	*/
    	this.current=0; 
    }
    
    // This method will apply the needed animation and displacement.
    slider.prototype.transition=function(coords){
    	this.container.animate({
    		'margin-left': coords || -(this.current*this.width+35*this.current) // First element is multiplied by Zero. The number 35 is the actual gap between two slides.
    	},500);
    };
    
    // This method will set the "current" counter to next position.
    slider.prototype.setCurrentPos=function(dir){
    	var pos=this.current;
    	console.log('Value of this.value is : '+dir);
    	// It'll check which button is pressed and accordingly increments or decrements the 'pos' variable.
    	pos+= ~~(dir=='next') || -1; // You can use alternate "Math.floor()" method instead of double tilde (~~) operator.
    	this.current=(pos<0)?this.imgLen-3: pos%(this.imgLen-2);
    	console.log(this.current);
    	
    };
    

    Multi Images/Frame Slider Output
    jQuery Slider multiple images

  4. Embedding multiple jQuery image sliders on a single Web Page

    • In this section, we’ll learn how to add more than one slider in a single webpage itself. If you observe previous codes, you’ll observe that our slider is enclosed within the ‘gallery’ div element.
    • So in the same way we’ll add a new gallery div element with exactly the same contents and we will give them a different name for CLASS and ID property wherever required.
    • Accordingly the CSS file has to be modified to create two sets of styling, one for gallery-1 and other for gallery-2.
    • The only change in multiSliderScript.js file is that we’re modifying the ‘setCurrentPos’ object to check for ‘Next button of both the sliders.

    Codes for all these files are as shown below.

    HTML Code
    MultiSlider.html

    
    <!Doctype html>
    <html>
    	<head>
    		<title>Multiple Slider on Single Page</title>
    		<link rel="stylesheet" href="styles/multiStyle.css">		
    	</head>
    	<body>
    		<!-- Container for Slider and Navigation Controls -->
    		<!-- This is First Slider. -->
    		<div class="gallery_1">
    			<h2>MultiImage Slider-1</h2>
    			<!-- The actual moving Slider with Slides and Dividers-->
    			<div class="slider_1">
    				<ul>
    					<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"></li>	
    				</ul>
    			</div>
    			<!-- Navigation Button Controls -->
    			<div id="slider-nav_1">
    				<button data-dir="prev_1">Previous</button>
    				<button data-dir="next_1" style="float:right;">Next</button>
    			</div>
    		</div>
    		
    		<!-- This is Second Slider. -->
    		<div class="gallery_2">
    			<h2>MultiImage Slider-2</h2>
    			<!-- The actual moving Slider with Slides and Dividers-->
    			<div class="slider_2">
    				<ul>
    					<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
    					<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"></li>	
    				</ul>
    			</div>
    			<!-- Navigation Button Controls -->
    			<div id="slider-nav_2">
    				<button data-dir="prev_2">Previous</button>
    				<button data-dir="next_2" style="float:right;">Next</button>
    			</div>
    		</div>
    		
    		
    		<!-- Loading JavaScript Codes. -->
    		<script src="scripts/jquery-2.1.0.js"></script>
    		<script src="scripts/multiSliderScript.js"></script>
    		<script>
    			// 
    			jQuery(document).ready(function ($) {
    				// creating a container variable to hold the 'UL' elements. It uses method chaining.
    				var container_1=$('div.slider_1')
    											.css('overflow','hidden')
    											.children('ul');
    				
    				var container_2=$('div.slider_2')
    											.css('overflow','hidden')
    											.children('ul');
    				
    				/* 
    				On the event of mouse-hover, 
    					i) Change the visibility of Button Controls.
    					ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode.
    				*/
    				$('.gallery_1').hover(function( e ){
    					$('#slider-nav_1').toggle();
    					return e.type=='mouseenter'?clearInterval(intv_1):autoSlider_1();
    				});
    				
    				$('.gallery_2').hover(function( e ){
    					$('#slider-nav_2').toggle();
    					return e.type=='mouseenter'?clearInterval(intv_2):autoSlider_2();
    				});
    				
    				// Creating the 'slider' instance which will set initial parameters for the Slider.
    				var sliderobj_1= new slider(container_1,$('#slider-nav_1'));
    				var sliderobj_2= new slider(container_2,$('#slider-nav_2'));
    				/*
    				This will trigger the 'setCurrentPos' and 'transition' methods on click of any button
    				 "data-dir" attribute associated with the button will determine the direction of sliding.
    				*/
    				sliderobj_1.nav.find('button').on('click', function(){
    					sliderobj_1.setCurrentPos($(this).data('dir'));
    					sliderobj_1.transition();
    				});
    				
    				sliderobj_2.nav.find('button').on('click', function(){
    					sliderobj_2.setCurrentPos($(this).data('dir'));
    					sliderobj_2.transition();
    				});
    				
    				// Calling autoSlider() method on Page Load.
    				autoSlider_1();
    				autoSlider_2(); 
    				
    				/* 
    				This function will initialize the interval variable which will cause execution of the inner function after every 2 seconds automatically.
    				*/
    				function autoSlider_1()
    				{
    					return intv_1 = setInterval(function(){
    						sliderobj_1.setCurrentPos('next_1');
    						sliderobj_1.transition();
    					}, 2000);
    				}
    				
    				function autoSlider_2()
    				{
    					return intv_2 = setInterval(function(){
    						sliderobj_2.setCurrentPos('next_2');
    						sliderobj_2.transition();
    					}, 2000);
    				}
    				
    			});
    		</script>
    	</body>
    </html>
    

    CSS Code

    multiStyle.css

    
    *
    {
    	margin:0;
    	padding:0;
    }
    
    .dividers
    {
    	margin:0 15px 0 15px; /* This is Important and margin must be same on both sides */
    }
    
    
    /* This style is for first Slider */
    .gallery_1
    {
    	width:550px;
    	height:112px;
    	margin:10px auto;
    	background:#999;
    	border:1px solid orange;
    }
    
    .slider_1
    {
    	width:inherit;
    	height:100px;
    	overflow:scroll;
    }
    .slider_1 ul
    {
    	width:10000px;
    	list-style:none;
    	margin-left:0px;
    }
    .slider_1 li
    {
    	float:left;
    }
    
    
    #slider-nav_1
    {
    	display:none; /* This is important to hide the buttons if jQuery is Not supported. */
    	margin-top: -4em;
    	cursor:pointer;	
    }
    /* This is for Second Slider */
    .gallery_2
    {
    	width:550px;
    	height:112px;
    	margin:10px auto;
    	background:#999;
    	border:1px solid orange;
    }
    
    .slider_2
    {
    	width:inherit;
    	height:100px;
    	overflow:scroll;
    }
    .slider_2 ul
    {
    	width:10000px;
    	list-style:none;
    	margin-left:0px;
    }
    .slider_2 li
    {
    	float:left;
    }
    
    #slider-nav_2
    {
    	display:none; /* This is important to hide the buttons if jQuery is Not supported. */
    	margin-top: -4em;
    	cursor:pointer;	
    }
    

    JavaScript Code

    multiSliderScript.js

    
    /*
    This method will initialize each slider instance.
    */
    function slider(container, nav){
    	this.container=container;
    	this.nav=nav.hide(); // This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining.
    	this.imgs=this.container.find('.slides'); // Returns jQuery object containing all matched elements.
        console.log('Value of this.imgs is : '+this.imgs);
    	this.width=this.imgs[0].width;
    	console.log('Value of width is : '+this.width);
    	this.imgLen=this.imgs.length; // Returns the total number of sliding elements.
    	/* 	Initialize the "current" counter. 
    		This counter keeps track of the index of current slide in the unordered list of elements. 
    		This will be used for calculating the required displacement.
    	*/
    	this.current=0; // Initialize the "current" counter.
    }
    
    // This method will apply the needed animation and displacement.
    slider.prototype.transition=function(coords){
    	this.container.animate({
    		'margin-left': coords || -(this.current*this.width+35*this.current) // First element is multiplied by Zero. The number 35 is the actual gap between two slides.
    	},500);
    };
    
    // This method will set the "current" counter to next position.
    slider.prototype.setCurrentPos=function(dir){
    	var pos=this.current;
    	console.log('Value of this.value is : '+dir);
    	// It'll check which button is pressed and accordingly increments or decrements the 'pos' variable.
    	pos+= ~~(dir=='next_1' || dir=='next_2') || -1; // You can use alternate "Math.floor()" method instead of double tilde (~~) operator.
    	this.current=(pos<0)?this.imgLen-3: pos%(this.imgLen-2);
    	console.log(this.current);
    	
    };
    

    Multi Slider Output
    jQuery sliders, jQuery image slider Multiple Slider Output

    NOTE: If you are using Chrome browser and want to debug your scripts, you can Press [F12] key and click on “Console” tab to see how “current” counter is changing on click of a button.

If you are having any doubt in understanding the code you can ask here through comments.

jQuery Image Slider Live Demo

You can see all the above jQuery image sliders in action by visiting below demo pages.

  1. Simple Image Slider Demo
  2. Multi Image Slider Demo
  3. Multiple Slider Demo

What’s next?

How do you feel folks? I know you want to have something better than these simple sliders. So, in the next tutorial we’ll come up with some coolest features, like Pagination and Content sliders. So let’s wait for upcoming tutorial on Creating you own Content-Slider with Pagination using CSS/JQuery.

NOTE: This article is submitted by Prakash Upadhyay. You can find him on Facebook.

Comments

  1. svs says:

    Gave up on it. Could not get it to work. Kept throwing erors.

    Failed to load resource: net::ERR_FILE_NOT_FOUND
    4.jpg%E2%80%9D:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    5.jpg%E2%80%9D:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot set property ‘container’ of undefined
    at slider (index.js:23)
    at HTMLDocument. (index.js:68)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)
    index.js:46 Uncaught TypeError: this.container.animate is not a function
    at slider.transition (index.js:46)
    at index.js:18
    31index.js:46 Uncaught TypeError: this.container.animate is not a function
    at slider.transition (index.js:46)

  2. Ahmad Leo Y. says:

    great tutorial, thank you.

    i successfully applying this tutorial to my website, but i want make image is going looping from last image to first image. current logic is after last image, the image will go back to first image not go forward. do you know what i mean? i want make last image is beside first image. thanks

  3. amar says:

    gud job sir

  4. Abie says:

    great tutorial thanks for this i found another good tutorial http://www.talkerscode.com of how to create you own image slider using jquery and css http://talkerscode.com/webtricks/basic-image-slideshow-with-previous-and-next-button-using-jquery.php

  5. Hi,

    Your tutorials are really awesome! Unfortunately I have not been able to implement this on my site. I use blogger.com as the platform to publish my posts.

    May you kindly let me know how the steps involved to get this working, I am specifically interested to know where I have to plugin in your code in the various sections of blogger, eg: , <![CDATA[ etc

    I am really confused, would be of great help if you could help me.

    Thanking you in advance.
    Regards,
    Hari

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages