in Playground

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: monday.com, a new way to manage your work! Meet the new visual project management tool.

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!

View demo Download Source
Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

CrossroadsSlideshow_featured

Crossroads Slideshow

Objects_featured

Exploding 3D Objects with Three.js

SVGFilterHover_featured

Image Distortion Effects with SVG Filters

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

Which newsletter would you like to receive?

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

    • 2

      Leanne, nice work! Just change quotes and content in ‘div.ca-wrapper’ to ‘ca-wrapper’

    • 3

      @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. 4

    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

Comments are closed.