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

11 comments:

  1. Hello bro. I discovered your blog by searching online programming tutorials in Bing Search Engine. This is an extremely well written article. I’ll make sure to bookmark it and return to learn more of your helpful information. Thank you for the post. I’ll definitely comeback.

    ReplyDelete

  2. This blog explains the details of most popular technological details. This helps to learn about what are all the different method is there. And the working methods all of that are explained here. Informative blog.
    PHP Training in Chennai Guindy

    ReplyDelete
  3. This was so useful and informative. The article helped me to learn something new.
    PHP Training in Chennai

    ReplyDelete
  4. your information is really awesome as well as it is very excellent and i got more interesting information from your blog. android Training in Chennai

    ReplyDelete
  5. This blog is having the general information. Got a creative work and this is very different one.We have to develop our creativity mind.This blog helps for this. Thank you for this blog. This is very interesting and useful.

    SEO Training in Chennai

    ReplyDelete
  6. I am regular visitor of this blog .I am working as blog reviewer in a private press and I saw many useful posts here. Sure, I will give best ratings for this blog .Keep posting best posts like this to get top reviews and ratings from blog reviewers and people .And I am thankful for this valuable post.
    Nautical Science Colleges in Chennai | Mechanical Colleges in Chennai | ECE Colleges in Chennai

    ReplyDelete
  7. This article is very much helpful and i hope this will be an useful information for the needed one. Keep on updating these kinds of informative things...

    Android App Development Company

    ReplyDelete
  8. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well
    iOS App Development Company
    iOS App Development Company

    ReplyDelete
  9. Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every blog.. i am expecting more updated posts from your hands.
    Fitness SMS
    Fitness Text
    Salon SMS
    Salon Text
    Investor Relation SMS
    Investor Relation Text

    ReplyDelete
  10. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving..
    Sms marketing
    Text message marketing
    Fitness SMS

    ReplyDelete
  11. This article is very much helpful and i hope this will be an useful information for the needed one.Keep on updating these kinds of informative things...
    PSD to Wordpress
    wordpress website development

    ReplyDelete