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:
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
