Jquery Carousels

Jquery Carousels

we all love carousels they are a fantastic way to give the effects we want our visitors to have, more than that we have multiple components to show like images, links, text etc.

There are lot many ways to achieve it, Jquery is ofcourse the best possible option available outside. We all search for lot of ems it can be Jquery Flexslider or Jcarousel Lite whatever you choose, customization is required, in this tutorial I am not going to focus on how to install these libraries rather one step ahead, to let you know how these carousels can be called multiple times in the same page having their controls working respectively for each carousel instance.

So, lets get started with the HTML



<div id="sideRight">
<div id="first">
      <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->
      <p class="containheader">Plans for you <a href="#"> View All Plans</a> 
      <!-- Do not change ends--->
      </p>
      </div>
      
      <div id="second">
      <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->
      <p class="containheader">Hot News - JUST IN <a href="#"> View All News</a> 
      <!-- Do not change ends--->
      </div>
      
      
      <div id="third">
      <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->
      <p class="containheader">Popular magazines <a href="#"> View All Magazines</a> 
      <!-- Do not change ends--->
      </div>
      
      <div id="fourth">
      <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->
      <p class="containheader">Entertainment <a href="#"> View All Movies</a> 
      <!-- Do not change ends--->
      </div>
       
</div>


In this HTML we have a various divisions and we need to place our carousels(dynamically) into the required divs.


The very first thing include the libraries files in the Head Section (I am using Jcarousel Lite for this example)





<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>




And then include the following javascript into your HTML to get the work started.






//Dynamic Carousel function Starts -- Please do not change the sequence of this --


var array_1_1 = new Array("images/IE.gif","http://www.microsoft.com","Text1");
var array_1_2 = new Array("images/home_hero2.jpg", "http://www.yahoo.in","Text2");
var array_1_3 = new Array("images/home_hero4.jpg", "http://www.ymail.com","Text3");
var array_1_4 = new Array("images/home_hero5.jpg", "http://www.google.com","Text4"); 


var mainpassingarray_1 = [array_1_1,array_1_2,array_1_3,array_1_4];


var array_2_1 = new Array("images/c2_i1.jpg","http://www.microsoft.com","Text1");
var array_2_2 = new Array("images/c2_i2.jpg", "http://www.yahoo.in","Text2");
var array_2_3 = new Array("images/c2_i3.jpg", "http://www.ymail.com","Text3"); 


var mainpassingarray_2 = [array_2_1,array_2_2,array_2_3];


var array_3_1 = new Array("images/c3_i1.jpg","http://www.microsoft.com","Text1");
var array_3_2 = new Array("images/c3_i2.jpg", "http://www.yahoo.in","Text2");
var array_3_3 = new Array("images/c3_i3.jpg", "http://www.ymail.com","Text3");
var array_3_4 = new Array("images/c3_i3.jpg", "http://www.ymail.com","Text3");
var array_3_5 = new Array("images/c3_i3.jpg", "http://www.ymail.com","Text3"); 


var mainpassingarray_3 = [array_3_1,array_3_2,array_3_3,array_3_4,array_3_5];


var array_4_1 = new Array("images/IE.gif","http://www.microsoft.com","Text1");
var array_4_2 = new Array("images/home_hero2.jpg", "http://www.yahoo.in","Text2");
var array_4_3 = new Array("images/home_hero4.jpg", "http://www.ymail.com","Text3");
var array_4_4 = new Array("images/home_hero5.jpg", "http://www.google.com","Text4"); 


var mainpassingarray_4 = [array_4_1,array_4_2,array_4_3,array_4_4];


    
(function( $ ){                                          
createEntertainmentCarousel("first", mainpassingarray_1);
createEntertainmentCarousel("second", mainpassingarray_2);
createEntertainmentCarousel("third", mainpassingarray_3);
createEntertainmentCarousel("fourth", mainpassingarray_4);


})( jQuery );




function createEntertainmentCarousel(id, numImages)
{
var content = '<div class="anyClass"><img class="prev" src="images/trans.png" /><img class="next" src="images/trans.png" /><ul></ul></div>';
$(content).appendTo("#"+id);


    for(var i=0; i < numImages.length; i++)
      {   
          $('<li><a href="'+numImages[i][1]+'" target="_blank"><img src="'+numImages[i][0]+'" style="width:25em;height:15em;"/></a><p class="imagetext">'+numImages[i][2]+'</p></li>').appendTo("#"+id+" .anyClass ul");
      }


}    
    
$('.anyClass').each(function() {
        $(this).jCarouselLite({
            btnNext: $(this).children()[1],
            btnPrev: $(this).children()[0]
           
        });
    });
    
});
//--Dynamic Carousel function Ends -- Please do not change the sequence of this --






In the above script, a new array is being created with 3 parameters like image path, its hyperlink and the text to be displayed, for the demonstration purpose I have created multiple arrays and passed them in a single multidimensional array (but you can always insert it dynamically no matter how many you want).


then the number of images and placeholder of carousel depends on the number of times you call the createEntertainmentCarousel(div ID, multidimension array) function.


Now lets configure the CSS involved with this.



.anyClass img{
background: url(../images/bg_direction_nav.png) no-repeat;
}


img.prev{
      left: -20px;
      width: 52px; height: 52px;
      height: 50px;
      top: 40px;
      left: 0px;
      position: absolute;
      z-index: 10;
      visibility: show ;
}


img.next{
      background-position: -52px 0;
      width: 52px; height: 52px;
      right: -1px;
      top: 40px;
      
      position: absolute;
      z-index: 10;
      visibility: show ;
}


.imagetext{
    background: #000;
    opacity:0.6;
    bottom: 0;
    color: #FFF;
    font-size: 14px;
    left: 0;
    line-height: 18px;
    border: 1px solid white;
    margin: 0;
    padding: 2%;
    z-index: 2;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    width: 100%;
}






And you are done...whatever server side language you are using just call the function with the parameters and it will work.


If you wish to add things to your carousel like you need to show 3 images instead of 4, then you need to modify the code






$('.anyClass').each(function() {
        $(this).jCarouselLite({
            btnNext: $(this).children()[1],
            btnPrev: $(this).children()[0]
           
        });
    })




Add the controls you want to it from  Jcarousel Lite  and ENJOY.

You can download the complete project from Google Code from here


Thanks !!

Happy Coding