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).
You can see it works and the code at https://jsfiddle.net/amitraya/1pt9swe8/2/
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:After this you will only see two arrows in your page. Now let's do the jquery to start with the rolling..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;
}
Now try to click on either of the arrow and it should work like a charm.
<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>
You can see it works and the code at https://jsfiddle.net/amitraya/1pt9swe8/2/
