Post
Ask Question

Create Custom Slider Using jQuery

Description

We often have a requirement for the slider in our Web pages and at that time, we look for the slider plugin, which is available in the thousands on the internet, but why can't we create our own as it's not so difficult to create? Let's create our own, simple short slider control, which is easy to understand.
 
CSS
  1. <style>  
  2.     .active  
  3.     {  
  4.         width: 100%;  
  5.         height: 300px;  
  6.     }  
  7.       
  8.     .inactive {  
  9.         display: none;  
  10.     }  
  11. </style>  
JavaScript
  1. <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>  
  2. <script>  
  3.     $(document).ready(function() {  
  4.         setInterval(function() {  
  5.             AddActive_AndInactiveClass();  
  6.         }, 3000);  
  7.     });  
  8.   
  9.     function AddActive_AndInactiveClass() {  
  10.         var currentActiveImage = $("img.active").attr("id");  
  11.         $("#" + currentActiveImage).removeClass("active");  
  12.         $("#" + currentActiveImage).addClass("inactive");  
  13.         $("#" + currentActiveImage).next().removeClass("inactive");  
  14.         $("#" + currentActiveImage).next().addClass("active");  
  15.         //Check if this is the last image, then set first image as active  
  16.         var CheckIfIsThisLastImage = $("#" + currentActiveImage).next().length;  
  17.         if (CheckIfIsThisLastImage == 0) {  
  18.             $('#divslider img').first().removeClass('inactive');  
  19.             $('#divslider img').first().addClass('active');  
  20.         }  
  21.     }  
  22. </script>  
HTML
  1. <div style="width:80%; margin:auto; height:300px;" id="divslider">  
  2.     <img src="images/tile2.jpg" id="firstimage" class="active" />  
  3.     <img src="images/tile3.jpg" id="secondimage" class="inactive"/>  
  4.     <img src="images/tile4.jpg" id="thirdimage" class="inactive"/>  
  5.     <img src="images/tile6.jpg" id="fourthimage" class="inactive"/>  
  6. </div> 
Our slider is ready. Let's see what we actually did. If you see the code, given above, you will get to know that we just created two simple classes- Active and Inactive. Subsequently, these are placed in the classes in the image tag we have for our slider within a Div tag(divslider). Thus, our work is half done. Now, we just have to hide and show each image one by one. We know that jQuery is used to do all the animation. Nowadays, we can do this with CSS also, but we will do this, using jQuey. Thus, give the reference of jQuery library to your HTML page.
 
We will find out the first image element Id, which we already gave. We will remove the active class from that element and will add an inactive class.
 
You will see, that we had just given the active class to the first image tag only and inactive to the rest, so that only one image will be displayed at one time.
 
Now, after adding inactive to first tag, we will find out the Id of the next image element and will remove the inactive class from it and will add an active class to it. We are calling this method with the setInterval function, so that slider images will run automatically after a few seconds and in the AddActive_AndInactiveClass() function, at last, we have checked if it is the last image element or not. In this case, we place the active class in the first image element, because there is no other child after the last element. Our slider is ready to run and you will get the following output with this:

slider
Yyou just created your first custom slider. You can add the effects on this, as you want. Hope, you enjoyed it. "Happy Coding! ;)"