Following Jan Sorgalla's example of a circular carousel, I had to do get this working with switching content associated with each carousel item. Since the circular carousel solution simply reloads items after each other, we have to keep track of what is where. In my case it was team members of a company website, and you want their name and info to keep up with their picture moving left and right.
// Example of fancy content loading function to keep it simple since the animation is not the point, you're free to let your divs fly around as you want switchTeamContent = function(i) { $('.fancy_content_item').slideUp('fast'); $('.fancy_content-'+i).slideDown('normal'); }; var mycarousel_itemList = []; var mycarousel_itemHTML = []; $('.jcarousel-skin-yourskin .jcarousel-list li').each(function(i){ var thisimg = $(this).find('img'); mycarousel_itemList[i] = { url: thisimg.attr('src'), title: thisimg.attr('title') }; mycarousel_itemHTML.push($(this).html()); }); mycarousel_itemVisibleInCallback = function (carousel, item, i, state, evt) { var idx = carousel.index(i, mycarousel_itemList.length); carousel.add(i, mycarousel_itemHTML[idx - 1]); }; mycarousel_itemVisibleOutCallback = function (carousel, item, i, state, evt) { carousel.remove(i); }; var outOpacity = 0.7; switchOffCarouselItem = function(li,animate) { if (animate) { $(li).fadeTo('normal',outOpacity).removeClass('active'); } else { $(li).css('opacity',outOpacity).removeClass('active'); } }; onSwitchCarousel = function(carousel,li,i,state,name,last) { switch(state) { case 'init': switchOffCarouselItem(li); break; case 'next': if (last) { switchOffCarouselItem(li); } else { switchOffCarouselItem(li,true); } break; case 'prev': if (last) { switchOffCarouselItem(li,true); } else { switchOffCarouselItem(li); } break; } if (last) { $(li).prev().fadeTo('normal',1).addClass('active'); var idx = carousel.index(i, mycarousel_itemList.length); if (idx == 1) { switchTeamContent(mycarousel_itemList.length); } else { switchTeamContent(idx - 1); } } }; onSwitchToLast = function(carousel,li,i,state,name) { onSwitchCarousel(carousel,li,i,state,name,true); }; $('#team_carousel').jcarousel({ scroll: 1, wrap: 'circular', itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}, itemFirstInCallback: {onBeforeAnimation: onSwitchCarousel}, itemLastInCallback: {onBeforeAnimation: onSwitchToLast} });
It should work with any jcarousel skin that already works, CSS is a beautiful thing.
I'll post a link to the finished product or get a demo up pretty soon.
Comments
Demo
Do you have a for this post? I am looking for something similar and hoping you have a solution. Thanks