Tuesday, July 21, 2015

Easy DIY Carousel using Jquery (Updated to include two carousel and slider button)

This is update to my last blog Easy DIY Carousel using Jquery and I have updated some code from the initial works for making the code reusable in moveleft() and moveright() function, also I have added one more carousel to show how we can have two carousel showing independent images but when on is clicked the other one also moves. I have also introduced a slider below using which you can go to specific slide without having to look at other slides. I have also moved all script from the html to another .js file.

So let's start, first off let's have the same code as given in Easy DIY Carousel using Jquery  blog. Now create another div and call it carousel1 and rest of the content and div inside the carousel remains the same as the first one. The only different in the inside of carousel and carousel1 is the fact that carousel contains counter whereas carousel1 doesn't because we are using the same counter for both the carousel. Also added is another div called navig which will give us the slider button.

After adding the new carousel and the slider the html code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Carousel</title>
  <meta name="author" content="amit.raya" />
  <!-- Date: 2015-07-12 -->
  <script src="jquery-2.1.4.min.js"></script>
  <script src="jquery-ui.js"></script>
  <!--Added new javascript file and removed all jquery code from the html-->
  <script src="myjs.js"></script> 
  <link rel="stylesheet" type="text/css" href="mystyle.css"/>
 </head>
 <body>
  <!--The first carousel-->
  <div class="carousel">
   <div class="main one">
    <div class="inside"></div>
   </div>
   <div class="main two">
    <div class="inside"></div>
   </div>
   <div class="main three">
    <div class="inside"></div>
   </div>
   <div class="main four">
    <div class="inside"></div>
   </div>
   <div class="pointerleft">
    <img src="Images/llt.png" />
   </div>
   <div class="pointerright">
    <img src="Images/right.png" />
   </div>
   <div class="counter" data-count="1"></div>
  </div>
  <!--Newly added carousel-->
  <div class="carousel1">
   <div class="main one">
    <div class="inside"></div>
   </div>
   <div class="main two">
    <div class="inside"></div>
   </div>
   <div class="main three">
    <div class="inside"></div>
   </div>
   <div class="main four">
    <div class="inside"></div>
   </div>
   <div class="pointerleft">
    <img src="Images/llt.png" />
   </div>
   <div class="pointerright">
    <img src="Images/right.png" />
   </div>
  </div>
  <!--HTML for the slider panel-->
  <ul class="navig">
   <li>
    <a class="d1"></a>
   </li>
   <li>
    <a class="d2"></a>
   </li>
   <li>
    <a class="d3"></a>
   </li>
   <li>
    <a class="d4"></a>
   </li>
   <!--Reserved if there are more than 4 slides-->
   <!-- <li>
    <a class="d5"></a>
   </li>
   <li>
    <a class="d6"></a>
   </li> -->
  </ul>
 </body>
</html>

Now that we have completed the HTML let's complete the css for the  for the slider and new carousel. First I will put only the part of code which is for the carousel1 and slider then I will paste the whole css. This will help you understand what has been added since the last blog.


.carousel{
 position:relative;
 width:450px;
 min-height: 550px;
 overflow:hidden;
 float:left;
 left:150px; /*changed from the last blog to have space enough for two carousel in the page*/
}
.carousel1{
 position:relative;
 width:450px;
 min-height: 550px;
 overflow:hidden;
 float:left;
 left:150px;
}
.navig{
 position:absolute;
 top:600px; /*adjust these values to suit your need*/
 left:475px; /*adjust these values to suit your need*/
}
.navig li{
 list-style: none;
 float:left;
 margin-left:10px;
}
.navig li a{
 padding:10px 5px;
 text-decoration: none;
 position: relative;
 display: inline-block;
 cursor: pointer;
 -webkit-perspective: 500px;
 -moz-perspective: 500px;
 -ms-perspective: 500px;
 -o-perspective: 500px;
 perspective: 500px;
 margin: 0 6px;
 padding: 9px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 background: #000;
 background-color: rgb(51, 153, 255,0.6);
}
Now the full CSS will look like this:

.carousel{
 position:relative;
 width:450px;
 min-height: 550px;
 overflow:hidden;
 float:left;
 left:150px; /*changed from the last blog to have space enough for two carousel in the page*/
}
/*new carousel*/
.carousel1{
 position:relative;
 width:450px;
 min-height: 550px;
 overflow:hidden;
 float:left;
 left:150px;
}
.main{
 position:absolute;
 margin-left: -450px;;
}
.inside{
 min-width: 400px;
 min-height: 500px;
 background-color:yellow;
 margin:20px;
}
.one{
 background-color:green;
}
.two{
 background-color:red;
}
.three{
 background-color:grey;
}
.four{
 background-color:blue;
}
.pushright{
 right:300px;
}
.pointerright, .pointerleft{
 position:absolute;
 top:230px;
}
.pointerleft{
 left:-43px;
}
.pointerright{
 right:-43px;
}
.navig{
 position:absolute;
 top:600px; /*adjust these values to suit your needs*/
 left:475px; /*adjust these values to suit your needs*/
}
.navig li{
 list-style: none;
 float:left;
 margin-left:10px;
}
.navig li a{
 padding:10px 5px;
 text-decoration: none;
 position: relative;
 display: inline-block;
 cursor: pointer;
 -webkit-perspective: 500px;
 -moz-perspective: 500px;
 -ms-perspective: 500px;
 -o-perspective: 500px;
 perspective: 500px;
 margin: 0 6px;
 padding: 9px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 background: #000;
 background-color: rgb(51, 153, 255,0.6);
}
Now once that is out of our way let's look at the jquery that we need.

$(document).ready(function(){
  $( ".one" ).animate({ "left": "+=450px" },"slow"); // initially start with 1
  $(".pointerright").click(function(){ //if the move right pointer is clicked
   moveright(); //point to the moveright function
  });
  $(".pointerleft").click(function(){//if the move left pointer is clicked
   moveleft(); //point to the moveleft function
  });
  
  $(document).keydown(function(e){
      if (e.keyCode == 39 || e.keyCode == 40) // Right down arrow 
      {
       moveright(); //point to the moveright function
      }else if (e.keyCode == 37 || e.keyCode == 38) // left up arrow
      {
       moveleft(); //point to the moveleft function
      }
    });
    $(".d1").click(function(){
     var counter = $(".counter").attr("data-count"); //get the counter value
     if(counter==2){
      $( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to visible window
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to initial placeholder
     }
     if(counter==3){
      $( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to visible window
      $( ".two" ).animate({ "left": "-=900px" },"slow"); //move the second slide to initial placeholder
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to initial placeholder
     }
     if(counter==4){
      $( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to visible window
      $( ".two" ).animate({ "left": "-=900px" },"slow"); //move the second slide to initial placeholder
      $( ".three" ).animate({ "left": "-=900px" },"slow"); //move the second slide to initial placeholder
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth slide to initial placeholder
     }
     $(".counter").attr("data-count","1"); //set the counter to 1
    });
    $(".d2").click(function(){
     var counter = $(".counter").attr("data-count"); //get the counter value
     if(counter==1){
      $( ".one" ).animate({ "left": "+=450px" },"slow"); //move the first slide to final placeholder
      $( ".two" ).animate({ "left": "+=450px" },"slow"); //move the second slide to visible window
     }
     if(counter==3){
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to visible window
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to initial placeholder
     }
     if(counter==4){
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to visible window
      $( ".three" ).animate({ "left": "-=900px" },"slow"); //move the third slide to initial placeholder
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth slide to initial placeholder
     }
     $(".counter").attr("data-count","2"); //set the counter to 2
    });
    $(".d3").click(function(){
     var counter = $(".counter").attr("data-count"); //get the counter value
     if(counter==1){
      $( ".one" ).animate({ "left": "+=450px" },"slow"); //move the first slide to final placeholder
      $( ".two" ).animate({ "left": "+=900px" },"slow"); //move the second slide to final placeholder
      $(".three").animate({ "left": "+=450px" }, "slow"); //move the third slide to visible window
     }
     if(counter==2){
      $( ".two" ).animate({ "left": "+=450px" },"slow"); //move the second slide to final placeholder
      $( ".three" ).animate({ "left": "+=450px" },"slow"); //move the third slide to visible window
     }
     if(counter==4){
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to visible window
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth slide to initial placeholder
     }
     $(".counter").attr("data-count","3"); //set the counter to 3
    });
    $(".d4").click(function(){
     var counter = $(".counter").attr("data-count"); //get the counter value
     if(counter==1){
      $( ".one" ).animate({ "left": "+=450px" },"slow"); //move the first slide to final placeholder
      $( ".two" ).animate({ "left": "+=900px" },"slow"); //move the second slide to final placeholder
      $(".three").animate({ "left": "+=900px" }, "slow"); //move the third slide to final placeholder
      $(".four").animate({ "left": "+=450px" }, "slow"); //move the fourth slide to visible window
     }
     if(counter==2){
      $( ".two" ).animate({ "left": "+=450px" },"slow"); //move the second slide to final placeholder
      $( ".three" ).animate({ "left": "+=900px" },"slow"); //move the third slide to final placeholder
      $( ".four" ).animate({ "left": "+=450px" },"slow"); //move the fourth slide to visible window
     }
     if(counter==3){
      $( ".three" ).animate({ "left": "+=450px" },"slow"); //move the third slide to final placeholder
      $( ".four" ).animate({ "left": "+=450px" },"slow"); //move the fourth slide to visible window
     }
     $(".counter").attr("data-count","4"); //set the counter to 4
    });
    function moveright(){
     var counter = $(".counter").attr("data-count"); //get the counter value
     if (counter == 1){ //if 1 is showing 
      $( ".one" ).animate({ "left": "+=450px" },"slow"); //push one out of the visible window to after visible placeholder
      $( ".two" ).animate({ "left": "+=450px" },"slow"); //push two in the visible window
      $(".counter").attr("data-count","2"); //set the counter value to 2
     }else if(counter==2){ //if 2 is showing
      $( ".two" ).animate({ "left": "+=450px" },"slow"); //push two out of the visible window to after visible placeholder
      $( ".three" ).animate({ "left": "+=450px" },"slow"); //push three in the visible window
      $(".counter").attr("data-count","3"); // set the counter value to 3
     }else if(counter==3){ //if three is showing
      $( ".three" ).animate({ "left": "+=450px" },"slow"); //push three out of the visible window to after visible placeholder
      $( ".four" ).animate({ "left": "+=450px" },"slow"); //push four in the visible window
      $(".counter").attr("data-count","4"); //set the counter value to 4
     }else if(counter==4){ // if four is showing, this is little tricky
      $( ".one" ).animate({ "left": "-=900px" },"fast"); // move first div to initial placeholder on the left
      $( ".two" ).animate({ "left": "-=900px" },"fast"); // move second div to initial placeholder on the left
      $( ".three" ).animate({ "left": "-=900px" },"fast"); // move third div to initial placeholder on the left
      $( ".four" ).animate({ "left": "-=450px" },"fast"); // move fourth div to initial placeholder on the left
      //note that the fourth div is pulled only 450px because it is currently in the visible window
      $( ".one" ).animate({ "left": "+=450px" },"slow"); // move first div to visible window
      $(".counter").attr("data-count","1"); //set the counter value to 1
     }
    }
    
    function moveleft(){
     var counter = $(".counter").attr("data-count"); //get the counter value
     if (counter == 1){ //if the 1st slide is showing
      $( ".one" ).animate({ "left": "+=450px" },"fast"); //move the first div to the after visible placeholder
      //since it is showing right now it has to be moved only 450px
      $( ".two" ).animate({ "left": "+=900px" },"fast"); // move the second div to the after visible placeholder
      $( ".three" ).animate({ "left": "+=900px" },"fast"); //move the third div to after visible placeholder
      $( ".four" ).animate({ "left": "+=900px" },"fast"); //move the fourth div to after visible placeholder
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth div to visible window
      $(".counter").attr("data-count","4"); // set the counter to 4the slide
     }else if(counter == 2){ //if second slide is showing
      $( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to initial placeholder
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to visible window
      $(".counter").attr("data-count","1"); //set the counter to 1
     }else if(counter == 3){ //if third slide is showing
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to the initial placeholder
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to visible window
      $(".counter").attr("data-count","2"); //update the counter value to 2
     }else if(counter ==4){ //if the fourth slide is showing
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to the intial placeholder
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth slide to visible window
      $(".counter").attr("data-count","3"); //update the counter value to 3
     }
    }
 });

And that's that, now we have two carousel which move together.

Please find the fiddle link here

Sunday, July 12, 2015

Easy DIY Carousel using Jquery

Before we start with the coding let's examine the concept of this Carousel. The idea is very simple. To explain I have one image and description below:


There are basically three to four steps to building a Carousel using jquery. The details of the concept is given below:
1. There has to be a placeholder for divs to start with and this placeholder should not be visible.
2. There should be a visible window through which each of the div will pass (slide) such that they look like we are rotating images
3. There should be another place holder where all these images should go to after passing through the visible window

Very simple idea, very simple implementation. Let's start with the code now.

First of all let's define four divs (you can use as many as you like).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Carousel</title>
  <meta name="author" content="amit.raya" />
  <!-- Date: 2015-07-12 -->
  <script src="jquery-2.1.4.min.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="mystyle.css"/>
 </head>
 <body>
  <div class="carousel">
   <div class="main one">
    <div class="inside"></div>
   </div>
   <div class="main two">
    <div class="inside"></div>
   </div>
   <div class="main three">
    <div class="inside"></div>
   </div>
   <div class="main four">
    <div class="inside"></div>
   </div>
   <div class="pointerleft">
    <img src="Images/llt.png" />
   </div>
   <div class="pointerright">
    <img src="Images/right.png" />
   </div>
   <div class="counter" data-count="1"></div>
  </div>
 </body>
</html>



After you have defined the four divs let's color them so that we can recognize which one is which and also try to place all those divs in one location as described in the diagram. Also we need to understand that here div with class carousel is our window, so to start with apart from the first div all other divs will be slid to the left (-450px from the visible window) of the carousel and after they become visible they will be pushed to the right(+450px from the visible window) such that they become invisible again. So our Carousel div has to have overflow hidden and a counter to ensure we are keeping count. So the mystyle.css will look like this:

.carousel{
 position:relative;
 width:450px; /*width equal to the divs*/
 min-height: 550px;
 overflow:hidden; /*very important it hides the overflow*/
 left:400px; /*to ensure that all divs are hidden*/
}
.main{
 position:absolute;
 margin-left: -450px;;
}
.inside{
 min-width: 400px;
 min-height: 500px;
 background-color:yellow;
 margin:20px;
}
.one{
 background-color:green; /*for identification*/
}

.two{
 background-color:red; /*for identification*/
}
.three{
 background-color:grey; /*for identification*/
}

.four{
 background-color:blue; /*for identification*/
}

.pointerright, .pointerleft{
 position:absolute;     /*definition for arrow left and right*/
 top:230px;
}

.pointerleft{
 left:-43px;
}
.pointerright{
 right:-43px;
}


After this you will only see two arrows in your page. Now let's do the jquery to start with the rolling.

<script>
 $(document).ready(function(){
  $( ".one" ).animate({ "left": "+=450px" },"slow"); // initially start with 1
  $(".pointerright").click(function(){ //if the move right pointer is clicked
      var counter = $(".counter").attr("data-count"); //get the counter value
      if (counter == 1){ //if 1 is showing
        $( ".one" ).animate({ "left": "+=450px" },"slow"); //push one out of the visible window to after visible placeholder
        $( ".two" ).animate({ "left": "+=450px" },"slow"); //push two in the visible window
        $(".counter").attr("data-count","2"); //set the counter value to 2
     }else if(counter==2){ //if 2 is showing
        $( ".two" ).animate({ "left": "+=450px" },"slow"); //push two out of the visible window to after visible placeholder
        $( ".three" ).animate({ "left": "+=450px" },"slow"); //push three in the visible window
        $(".counter").attr("data-count","3"); // set the counter value to 3
     }else if(counter==3){ //if three is showing
        $( ".three" ).animate({ "left": "+=450px" },"slow"); //push three out of the visible window to after visible placeholder
       $( ".four" ).animate({ "left": "+=450px" },"slow"); //push four in the visible window
       $(".counter").attr("data-count","4"); //set the counter value to 4
    }else if(counter==4){ // if four is showing, this is little tricky
      $( ".one" ).animate({ "left": "-=900px" },"fast"); // move first div to initial placeholder on the left
      $( ".two" ).animate({ "left": "-=900px" },"fast"); // move second div to initial placeholder on the left
      $( ".three" ).animate({ "left": "-=900px" },"fast"); // move third div to initial placeholder on the left
      $( ".four" ).animate({ "left": "-=450px" },"fast"); // move fourth div to initial placeholder on the left
      //note that the fourth div is pulled only 450px because it is currently in the visible window
      $( ".one" ).animate({ "left": "+=450px" },"slow"); // move first div to visible window
      $(".counter").attr("data-count","1"); //set the counter value to 1
   }
  });
  $(".pointerleft").click(function(){//if the move left pointer is clicked
   var counter = $(".counter").attr("data-count"); //get the counter value
   if (counter == 1){ //if the 1st slide is showing
      $( ".one" ).animate({ "left": "+=450px" },"fast"); //move the first div to the after visible placeholder
    //since it is showing right now it has to be moved only 450px
      $( ".two" ).animate({ "left": "+=900px" },"fast"); // move the second div to the after visible placeholder
      $( ".three" ).animate({ "left": "+=900px" },"fast"); //move the third div to after visible placeholder
      $( ".four" ).animate({ "left": "+=900px" },"fast"); //move the fourth div to after visible placeholder
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth div to visible window
      $(".counter").attr("data-count","4"); // set the counter to 4the slide
    }else if(counter == 2){ //if second slide is showing
      $( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to initial placeholder
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to visible window
      $(".counter").attr("data-count","1"); //set the counter to 1
    }else if(counter == 3){ //if third slide is showing
      $( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to the initial placeholder
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to visible window
      $(".counter").attr("data-count","2"); //update the counter value to 2
    }else if(counter ==4){ //if the fourth slide is showing
      $( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to the intial placeholder
      $( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth slide to visible window
      $(".counter").attr("data-count","3"); //update the counter value to 3
   }
  });
 });
</script>


Now try to click on either of the arrow and it should work like a charm.
You can see it works and the code at https://jsfiddle.net/amitraya/1pt9swe8/2/