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


View demo Download source

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 demoDownload source

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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 151

Comments are closed.
  1. 1

    yet another killer… you are making some serious things to jquery. I think i’m gonna use this in my next template.

  2. 2

    But a small bug in IE. its fallback the last slide wrongly. please check the demo again.

  3. 3

    There are bugs in this demo. When you open a penel that is not on left most part of slider and then closes it the whole behaviour of slider changes and it starts repeating same slides. Other than that its good.

  4. 5

    Hi all, thanks for your feedback!
    @Imran, I cannot recreate the problem that you are describing, please note that the text is repeated throughout the expanded content areas. The headlines are not though, could you check that again?
    @Selva what do you mean with fallback? And what exactly is wrong with it and which IE version are you using? Thanks and cheers, ML

  5. 7

    this is just AWESOME!!
    i have no problem in my IE… i’ve just 2 warning error for position left and top with firebug…
    thanks for your great work!

  6. 12

    amazing.. and surprisingly, its very simple to implement & light weight on pages…

    does it work across all browsers

  7. 13

    i double checked by using IE7,8,9. The problem is in,
    After loading all items just you click on the “more” button of third container (ca-item-main). It opens the content wrapper to its right. Then if you close that wrapper by pressing “X” in the top. Then you see the problem. It doesn’t show the things correctly.

    But besides its a nice one. You did a good job mary lou. :-D

  8. 16

    So streamlined. Great job on the markup. The “card” layout and typography is gorgeous.

  9. 19

    I guess one solution to IE problems is to not use IE. Great tutorial, Mary-Lou, as always.

Comments are closed.