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, 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!

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

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

    Hello all

    My first words go to Mary Lou : Thank You . As some of the users commented already i found some issues while using this carrossel. My goal was to implement it in magento for a products slider. It worked but i need to do some changes in the js.

    The changes are :
    Where you call the function remove item i add some pixels to the interval so it do not remove some of the items that are still on the screen.

    In the function that determine the position of the item that the user clicked i add also ranges. I was getting problems in some resolutions .

    Thanks again and regards for all .

  2. 2

    @Brent – the issue is with your paragraph tags – empty para tags are being inserted but the code editor you use…

    quick solution – in case you are not using para tags in the content is

    In your common.css

    you have

    p, .p {
    margin-bottom: 1em;
    }

    make that

    p, .p {
    margin-bottom:0;
    }

    and the issue is resolved.

  3. 6

    Wonderful job on this, it works as a charm!

    I have the same question of Michael, there is anyway to be able to click anywhere on the “ca.item” div instead of having to click the “more” button?

  4. 9

    Fab I just removed $(this).hide(); in jquery.contentcarousel.js from the
    // click to open the item(s) block of code. Doing this you can wrap anything with

  5. 12

    Hi!
    I did a first test to use this great plugin as image gallery with text and images.

    Now I have the problem that I have a lot of images and the pages takes time to load, so I integrated the loader from http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

    but this does not work with JQUery 1.6 (just a black layer and no progress) and I also tried other loaders

    do you have a recommendation for a loader which does work with that plugin and are easy to implement?

    I am so glad about this carousel!

  6. 13

    I found a solution: I added body-onload to the body-tag:

    and placed the loading spanner below the left arrow using CSS

  7. 15

    I really enjoy your Circular Content Carousel, but I am having a problem trying to figure something out with it. I’m trying to make a link on another page, go the the page with the Circular Content Carousel on it, and open a specific slider without having to hit the more button to open it. Would you know how to do that?

  8. 17

    Hi Mary, any suggestion about dynamical change content.
    I mean when someone click to link
    content of div ‘ca-wrapper’ update without reload page.

  9. 19

    Hi Mary, This is exactly what I like to have. A Million thanks! May I request you one more feature – Auto rotate – without having to click on the arrows. Any idea how I could do this?

  10. 20

    hey, thanks so much, its an awesome script 😀 but i was wondering if i can somehow make 20 of items or more ?
    how would one do that?

    thanks again 🙂

Comments are closed.