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: monday.com is the last team management and design process tool youโ€™ll ever need. 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. @Selva, I tried in IE7/8/9 and I simply cannot see any problem… A screenshot would be great to see what happens! Thanks and cheers, ML

  2. i create a 3 carousel in one page with different id, all carousel are use the last ca-item quantity, how to fix it?

    • @lalapo Could you download it again and replace the js file? Let me know if it works!

  3. Hi Mary Lou iยดm giving the first steps developing websites,and iยดm learning a lot on this site,My question is can we use the content for building websites for other people??Comercial use?
    Great tutorial.

  4. @marylou

    Looking at the js file.
    where can I change it, so the slide takes over the whole container, sliding the left panel off screen?

    Cheers

  5. Brilliant script!

    I am trying to modify it to show 5 items at once (the whole thing is still 990px wide).

    I can get the 5 items to show fine however I cannot get the “Show More” box to stretch the whole width, it is only going the distance of 3 boxes.

    Is it possible to either have the script auto detect how many are showing or provide a variable/option for how many items you wish to display or even just hint me in the right direction of what needs to be edited?

    Many thanks

  6. I was looking at some point for a circular carousel and I wasn’t happy with what I found. This one looks really good!

    Thumbs up for the content for the slides ๐Ÿ˜€

  7. Great carousel!

    Is there any way to adjust is so that instead of having to click the “more” links, a click anywhere on an item will cause it to slide open?

    Thanks,

    Michael