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 position.

By Manoela Ilic in Playground on
Demo Download

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Layout with Reveal Animations and Content Preview

From Product to Cart: Adding Guiding Animations to the Shopping Experience

Background Shift Animation with CSS Blend Modes

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 153

Comments are closed.

  2. 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?

  3. 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!

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

    There is a inserted in ca-item-2

    Hope this helps!

  6. @Maquetador

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

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

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

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

  9. 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 !

  10. 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.

  11. 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 .

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

  16. 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?

  19. 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

  22. 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!

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

    and placed the loading spanner below the left arrow using CSS

  25. 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?

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

  29. 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?

  30. 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 🙂

  31. I have the same problem Jonathan, is there any function or command to call a .html file with the code of every item to show? i mean 1 .html per item, like i used in iframes

  33. Hey SIR Z. would you mind helping me out, if you can send your code to my email it would be so much of a help, i have no idea how to add more, i tried but it doesnt work right after adding 1 more :/

  35. hey guys, how would i change the content in ‘more’? Not sure where I can find the wrappers for each image like the one posted above.

    Thank you!

  36. Very nice article!Very nice plugin!Congratulations Mary Luo!This iniciative is very important to the web community!Thanks!

  37. Mary Lou, I am trying to use more than three items showing up at the same time. When I press ‘more’ it does a funny thing and opens up two ‘hidden’ boxes at the same time. I tried changing width of the hidden box to fit the wrapper in styles.css but it doesn’t help. Anyone had similar experiences? Maybe I need to change something in carousel javascript?

  38. Forget about my post, @Pushpinder Bagga explained that earlier! Brilliant, thanks Pushpinder Bagga!!!

  39. On pressing “More…”, instead of hiding it, how to change it to “Less…” ?? I tried my best but couldn’t find any solution… Help plzzz…

  40. @sharan: Therz a workaround for tat.
    1) Put this after class=”ca-more” –
    <a href=”#” rel=”nofollow”>less…</a>
    2) Use the same css as ca-more for this also (its ur wish).
    3) Paste this round line 199 in jquery.contentcarousel.js(click to open the item(s) function) –
    $(“a[class=ca-less]”).show();
    4) Paste this round line 210 in the same file(click to close the item(s) function) –
    $(“a[class=ca-less]”).hide();
    5) It’s done…

  41. Nice one Mary Lou!

    very cool script, no doubt.
    Like a few people asked before, is there a way to have the option to “auto start” the carousel upon page load.

    And of course, having a “pause” on mouse hover would be the cherry on top !

    thanks again for this great script

  42. I implemented scrollbars in the expanded content div because I had a lot of text. However, after one round of horizontal scrolling through the carousel, the scrollbars inside the expanded content stop working. I wonder if there’s some of reinit script I can use to keep the interior scrollbars on the div items still functional. Thanks!

  43. We’re experiencing a problem that when you use your browser to zoom out and try to rotate the carousel, the left item disappears. Any clue why that is or how to fix?

  44. Hi, i figured how to add more items, all works fine. Now im trying to add fancybox / lightbox / shadowbox / prettyphoto script, any of them i tried does not work, i think scripts are colliding somehow, but i cant make the java pop up with any of them.
    They just open in a blank page

    can anyone else try this ?
    thanks

  48. has anyone found a way to put multiple carousels on a single page? The second one always shows up oddly. I’m guessing it has to do with the way the script is treating the specific classes, but I even tried duplicating everything, and adding a “1” after certain classes such as:
    .ca-item
    .ca-wrapper
    both in CSS and in JS:
    $wrapper = $el.find(‘div.ca-wrapper’),
    $items = $wrapper.children(‘div.ca-item’),

    and all instances of it, by adding a 1, so it’d be:
    (‘div.ca-item1’)
    as an example. Any help would be greatly appreciated! 🙂

  49. nevermind I figured it out. you just add another one lower in the code, and then apply the carousel like this:
    $(‘#ca-container’).contentcarousel();
    $(‘#ca-container2’).contentcarousel();
    $(‘#ca-container3’).contentcarousel();

    but now my problem is not being able to resize these boxes to a more realistic size and shrink the height, then put 4 next to each other. tons of bugs exist when doing that — any ideas?