$(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
}
}
});
<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>
<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>
<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>
<!-- <li>
<a class="d5"></a>
</li>
<li>
<a class="d6"></a>
</li> -->
</ul>
.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;
}
.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;
left:475px;
}
.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);
}