Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
The beautiful animal icon set in the ZIP file are by Cyberella and they are licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License.
The HTML Structure
The structure consists of a main container and a wrapper for the items. Each item contains
<div id="ca-container" class="ca-container"> <div class="ca-wrapper"> <div class="ca-item ca-item-1"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Stop factory farming</h3> <h4> <span class="ca-quote">“</span> <span>Some text...</span> </h4> <a href="#" class="ca-more">more...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Animals are not commodities</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>Some more text...</p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> <div class="ca-item ca-item-2"> ... </div> ... </div><!-- ca-wrapper --> </div><!-- ca-container -->
The initial view of the content carousel:
When we click on “more…”, another content area will slide out and move the respective item to the left:
The default options are the following:
$('#ca-container').contentcarousel({
// speed for the sliding animation
sliderSpeed : 500,
// easing for the sliding animation
sliderEasing : 'easeOutExpo',
// speed for the item animation (open / close)
itemSpeed : 500,
// easing for the item animation (open / close)
itemEasing : 'easeOutExpo',
// number of items to scroll at a time
scroll : 1
});
We hope you enjoy this simple carousel and find it useful!
Its Just AWESOME!! Thank you very much!
Plugin very good, but it is quite a serious problem. I wanted to combine it with the scroll (http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html). Unfortunately scrolling does not work. Scrollbar is converted, but it does not move the contents (without the carousel works fine). The same situation applies Cufon. I have 3 items. Sometimes both Cufon and scroll work, but no longer do that when implementing the next 4-5 times (or more than the number of items). This problem is quite troublesome, because you can not use any other script working properly with the carousel. I will be grateful for a solution. Perhaps with such a problem has already met someone and share the solution.
Hey, just wanted to throw it out there that if there is more written content in the expanded box than there is initially room for, the scroll wheel sliding function won’t allow the user to scroll through what is written. Is there an easy way to fix this? The whole script loses a lot of use if there isn’t a way to have an ever-expansive post.
Just adjust the height of the containers in the css and you can fit the extra content in the slide panels its not the perfecxt solution but it will fix your problem
That doesn’t help at all. I think I might have solved it with an ‘overflow-y:scrolling’ but I haven’t tested it and I have a feeling the scrollwheel binding will interfere with navigating through the overflowed content. The reason your answer isn’t useful is that it assumes that all of my content is static and not dynamically loaded.
I also would like to try get this scrolling and tried arnaulds suggestion it works until u click the more or the arrows, would need a function to stop the scrolling at this point. Anyone figured that out?
Wow, awesome! Thanks for sharing!
Is there anyway to navigate the carousel from an external menu? I love it. Thanks
Hi,
Nice artical
Nice little slider, this website is brilliant a big thank you for all the help and cool bits you have given me!! Thanks again!
Wonderful script!
I’m using it and no problems, however I need to have some sort of goto() slide… so I could attach it to some buttons outside of the carousel.
I have tried this and didn’t work, I guess I’m pretty close but dont know what’s next…
$.fn.gotoItem=function(element, n, d){
var $el = $(element),
$wrapper = $el.find(‘div.ca-wrapper’),
$items = $wrapper.children(‘div.ca-item’),
cache = {};
// save the with of one item
cache.itemW = $items.width();
// save the number of total items
cache.totalItems = $items.length;
cache.expanded = true;
cache.gotoItem = true;
cache.idxClicked = n;
var dir = (d === 1 || d === -1)?d:1;
var settings = {};
settings.scroll = 1;
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( dir, $el, $wrapper, settings, cache );
return true;
}
and call it like this:
var carousel = $(‘#ca-container’).contentcarousel({sliderSpeed : 2000});
$(‘#button1′).click(function(){
carousel.gotoItem(‘#ca-container’, 1,-1);
});
$(‘#button2′).click(function(){
carousel.gotoItem(‘#ca-container’, 2,-1);
});
Thanks for your help