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

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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

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. Once Again you never fail to impress, variations of this simple carousel are surely going to start popping up all across the web. The more tab is a nice touch. Keep up the Good work Mary Lou, I look forward to seeing what you come up with next time!

  2. Hi Mary Lou,
    this is impressive.
    Sorry to tell you, i accidently found a bug:once you click the ?read more’ link and the green box with the paragraph text appears, you should disable scrolling and the next/previous button, ’cause wright now if i scroll after a while there is nothing to scroll, every item dissappears. Also, if i close the green box, after scrolling a bit with the box open, after returning all the items are doubled?
    Using latest Chrome version, hope it helps 🙂 Keep it up 🙂

  3. I am loving this! I am a true novice to js and was wondering if there is a way?

    I see that the html for the navigation arrows is contained within the js file.

    Is there a way for me to create a link outside of the js file that when clicked it will slide to a certain slide?

  4. Fluid, easy to use, functional, ergonomic design…
    Good inspiration

    Bonne continuation ML.

  5. @Selva Thank you for recording that! That’s very strange indeed, did anybody else experience that same problem? Cheers, ML

    • Mary I have the same issue like Selva has, it happens only IE9 though, not even IE8.

      Strange, Maybe IE9 has bugs on jQuery code ? While older IE 8 doesn’t have the same problems ?

  6. Hello John Nerush

    I think your suggestion is a good one, we should have an option as to how many items to be shown in the carousel.

    Albeit, here is a temporary solution you seek.

    I tried with 4 items and these are the lines I had to change.

    LINE 12

    factor = 4;

    LINE 54

    width : cache.itemW * 3 + ‘px’,

    LINE 78
    $item.css( ‘left’, – ( openedIdx – idx ) * ( cache.itemW * 4 ) + ‘px’ ).show().find(

    LINE 80
    width : cache.itemW * 3 + ‘px’

    Add the below after LINE 135

    case cache.itemW * 3 : return 4; break;

    And then from LINE 170 to LINE 178

    change all 3’s to 4

    Finally modify

    .ca-container{
    width:980px;
    }
    .ca-item{
    width:245px;
    }

    A little calculations and logical thinking could give you solutions to N number of items.

    Hope this helps!

    Cheers to Mary Lou!

  7. @ML

    What I was wondering is instead of this complex logic (for beginners like myself) couldn’t we just keep the carousel repeating and on click of an item, clone it, animate it to the left, increase the width of the description, make its z-index higher and simply hide the main carousel.

    A simple yet effective solution… what you recon?

  8. A bit of a weird one in Chrome, Firefox and Safari. Seems fine in IE (weird?):

    http://huron-manitou-dulcimers.ca/site/gallery/

    There are 5 items in the carousel. As you scroll to the right, once the loop starts, item “6” appears to sit lower than item 5. If you scroll through the carousel a bit more, and then use the left (scroll backwards) function, it seems to correct itself. Any thoughts?

  9. Is there any way to make 2 levels or tiers?

    I tried duplicating the code from
    but of course it wasn’t as simple as that.

    Can you help?

    Great effect btw, love it!

  10. @Brent – the issue is with your “” ‘s

    There is a inserted in ca-item-2

    Hope this helps!

  11. @Maquetador

    You can use the set timeout function along with the function below to do so

    aux.navigate( 1, $el, $wrapper, settings, cache );

  12. great plugin…easy to use,works cross browser etc….just and exactly what I’ve been looking for a project I’m working on right now 🙂 thanks

  13. @PUSHPINDER BAGGA – Thanks for taking time to look. I’m not sure that I follow – could you be a little more specific?

  14. What a talent, Mary Lou .. I’m now trying the stuff with only two elems. But I need help, with your pardon 😀 I’m actually trying to do the stuff with only two items, but it does not seem to work properly. What do I have to change in the carrousel ?
    Thanks a lot !

  15. Great, really great.
    I have a problem, I want to use jquery dialog show after user clicked on black button ( become a member for exemple ) , and then the dialog appears but not in front but behind ( “Think globally, act locally … and all items ).
    How can I have my dialog in front of it ?
    Thanks a lot.