in Playground on

Circular Content Carousel with jQuery

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 posi
CircularContentCarousel
View demo Download Source

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Interactive3DCharacter_feat

How to Create an Interactive 3D Character with Three.js

FlowmapDeformation_featured

Mouse Flowmap Deformation with OGL

configurator_featured

A Configurator for Creating Custom WebGL Distortion Effects

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 153

Comments are closed.

  1. 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);

  2. 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