From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.
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!
I’ve done a quick pause on hover to Arnaud’s autoscroll function..
/* auto scroll, pause on hover */
var autoscroll = setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},5000);
$(this).find(‘div.ca-wrapper’).hover(function(){
autoscroll = clearInterval(autoscroll);
}, function(){
var autoscroll = setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},5000);
});
Leanne, nice work! Just change quotes and content in ‘div.ca-wrapper’ to ‘ca-wrapper’
@Leanne
You and Arnaud forgot about:
”
if( cache.isAnimating ) return false;
cache.isAnimating = true;
”
If you dont’t put that, the items will duplicates themselves when you click the prev or next buttons while the auto scroll is animating
—
setInterval(function() {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
},2000);
Hi, I try this but it doesnt´t work at all for me.
// auto scroll, pause on hover
var autoscroll = setInterval(function() {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
},4000);
$(this).find(‘.ca-wrapper’).hover(function(){
autoscroll = clearInterval(autoscroll);
}, function(){
var autoscroll = setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},1500);
});
—
@ A. Ferreira could you please paste your full working code?
Thanks
Ogni
Very nice library just that it has an issue with zoom-in where the navigation fails.
Thanks!
what if I want to have this slider at two places on the same page.