OVERVIEW
By Multicarousel I mean showing a horizontal and vertical carousel together and letting one carousel trigger the other. You can extend this logic to have three or more carousels together with a trigger cascade i.e carousel 1 triggers carousel 2 and carousel 2 which triggers carousel 3 and so on.
This demo is purely javascript and HTML based, but in real-world sites you would want to populate the carousels using server-side code.
WHAT YOU NEED
- Jquery at least 1.4.2 or above
- jsor-jCarousel
HOW THIS WORKS
JCarousel can be setup either as a horizontal carousel or a vertical one. What we are doing here, is show two different carousels – one vertical and one horizontal and use the vertical one to trigger the horizontal one.
The number of items in each of the carousels has to be the same. In this case its assumed to be 5. JCarousel configuration allows a carousel to have navigation controls or not. Here we show navigation controls for the vertical carousel and hide them for the horizontal carousel.
Every time the next arrow on the vertical carousel is clicked it triggers the horizontal carousel to move to the next item and the same for the previous arrow.
The easing effect has been added as extra eye-candy, but you can apply any jquery effect you want or simply have no effects – have smooth scrolling.
Another visual component added is 5 dot images between the navigation arrows. According to the current image highlighted in the vertical carousel the relevant dot gets highlighted.
The triggering and the highlighting of the dots is done using the javascript function juggle()
function mycarousel_itemLoadCallback(carousel, state)
{
juggle(state, carousel.first, carousel.last);
};
var arrDots= new Array();
arrDots[0] = false;
arrDots[1]= false;
arrDots[2] = false;
arrDots[3] = false;
arrDots[4] = false;
var currentDot = 1;
var actionFromDot =false;
$(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 1,
itemLoadCallback: mycarousel_itemLoadCallback,
easing: 'BounceEaseOut',
animation:500,
wrap: 'circular'
});
jQuery('#mycarouselmain').jcarousel({
vertical: false,
scroll: 1,
easing: 'BounceEaseOut',
animation:800,
buttonNextHTML : null,
buttonPrevHTML: null,
wrap: 'circular'
});
jQuery('.imgDot').hover(function(){
var img = jQuery(this).attr('id');
var id = img.substring(img.length-1);
if (arrDots[id] == false)
jQuery(this).attr('src', 'includes/jquery/jsor-jcarousel/skins/custom/dot_hover.PNG');
});
jQuery('.imgDot').mouseout(function(){
var img = jQuery(this).attr('id');
var id = img.substring(img.length-1);
if (arrDots[id] == false)
jQuery(this).attr('src', 'includes/jquery/jsor-jcarousel/skins/custom/dot.PNG');
});
jQuery('.lnkDot').click(function(){
var img = jQuery(this).attr('id');
var id = img.substring(img.length-1);
var currId = currentDot;
var i = 0;
var start= 0;
var stop = 0;
if (parseInt(currId) < parseInt(id)) {
start = currId;
stop = id;
}
else {
start= id;
stop = currId;
}
for (i = start; i<= stop; i++) {
actionFromDot = true;
var carousel = jQuery('#mycarousel').data('jcarousel');
carousel.next();
}
highlightDot(id);
currentDot = id;
return false;
});
});
function highlightDot(id) {
img= "imgDot";
img += id;
var i = 0;
for(i = 0; i <= 5; i++) {
arrDots[i] = false;
jQuery('#imgDot' + i).attr('src', 'includes/jquery/jsor-jcarousel/skins/custom/dot.PNG');
}
arrDots[id] = true;
currentDot = id;
jQuery('#' + img).attr('src', 'includes/jquery/jsor-jcarousel/skins/custom/dot_big.PNG');
}
function juggle(state, start_item, stop_item) {
if (!actionFromDot) {
if (state == 'prev'){
currentDot -- ;
if (currentDot < 1)
currentDot = 5;
}
else if (state == 'next') {
currentDot ++;
if (currentDot > 5)
currentDot = 1;
}
highlightDot(currentDot);
}
actionFromDot = false;
if (state == "prev" ) {
var carousel = jQuery('#mycarouselmain').data('jcarousel');
carousel.prev();
}
else if (state == "next" ) {
var carousel = jQuery('#mycarouselmain').data('jcarousel');
carousel.next();
}
}
The HTML code is given below:
<div class="container">
<div class="bottom">
<div class="left">
<ul id="mycarouselmain" class="jcarousel-skin-custom">
<li>
<div id="clarge0" class="topPhone">
BLOCK 1
</div>
</li>
<li>
<div id="clarge1" class="topPhone">
BLOCK 2
</div>
</li>
<li>
<div id="clarge2" class="topPhone">
BLOCK 3
</div>
</li>
<li>
<div id="clarge3" class="topPhone">
BLOCK 4
</div>
</li>
<li>
<div id="clarge4" class="topPhone">
BLOCK 5
</div>
</li>
</ul>
</div>
<div class="right">
<ul id="mycarousel" class="jcarousel-skin-custom">
<li>
<div id="csmall0" class="partPhone">
BLOCK 2
</div>
</li>
<li>
<div id="csmall1" class="partPhone">
BLOCK 3
</div>
</li>
<li>
<div id="csmall2" class="partPhone">
BLOCK 4
</div>
</li>
<li>
<div id="csmall3" class="partPhone">
BLOCK 5
</div>
</li>
<li>
<div id="csmall4" class="partPhone">
BLOCK 1
</div>
</li>
</ul>
<div class="carousel_dots">
<a href="#" class="lnkDot" id="lnkDot1"><img id="imgDot1" class="imgDot" src="../includes/jquery/jsor-jcarousel/skins/custom/dot.PNG" border=0 align=center></a>
<a href="#" class="lnkDot" id="lnkDot2"><img id="imgDot2" class="imgDot" src="../includes/jquery/jsor-jcarousel/skins/custom/dot.PNG" border=0 align=center></a>
<a href="#" class="lnkDot" id="lnkDot3"><img id="imgDot3" class="imgDot" src="../includes/jquery/jsor-jcarousel/skins/custom/dot.PNG" border=0 align=center></a>
<a href="#" class="lnkDot" id="lnkDot4"><img id="imgDot4" class="imgDot" src="../includes/jquery/jsor-jcarousel/skins/custom/dot.PNG" border=0 align=center></a>
<a href="#" class="lnkDot" id="lnkDot5"><img id="imgDot5" class="imgDot" src="../includes/jquery/jsor-jcarousel/skins/custom/dot.PNG" border=0 align=center></a>
</div>
</div>
</div>
</div>
The horizontal carousel has been set to show only one item at a time and the vertical carousel shows two items at a time. The visual effect is that if there are 5 items to show then item 1 shows in the horizontal carousel and 2 and 3 show in the vertical one. On clicking next, item 2 moves to the horizontal carousel and 3,4 show in the vertical one.
BEFORE DOWNLOADING AND RUNNING THE CODE
Please note that in the code, the jquery and jcarousel scripts are assumed to be in a folder called /includes . You would have to change the path in the php file as per your own folder setup.
Also you can easily rename the php file to html and execute since there is no server-side code being executed here.
Click here to download the source
All comments/queries and opinions are welcome.
Leave a Reply