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

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

    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

  2. 3

    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 :/

  3. 4

    Hi Mike,
    Nothing difference in JS code but put extend your html code

  4. 5

    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!

  5. 6

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

  6. 7

    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?

  7. 8

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

  8. 9

    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…

  9. 10

    @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…

  10. 11

    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

  11. 12

    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!

  12. 13

    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?

  13. 14

    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

  14. 18

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

  15. 19

    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?

Comments are closed.