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

    Hi everyone, hope someone can help me!
    I use this amazing and wonderful carousel in a website i’m developing but it suffers some problems that has been expressed before but i don’t have any clue to how i can fix it. In other words i have duplication of content or missing.
    I made also some modification so there is a single button that open the wrapp.
    I find also a way to use lightbox without conflicts.
    Here is the site: http://www.vimodel.it/ita/index.html
    Hope someone can help me!
    by the way, sorry for my poor english!

  2. 2

    Hi Mary, congratulations on the excellent work here, and I would like to ask you if there is a possibility the example here shown to have some conflict with Östros jquery scripts and so, I’ll be specific, I installed it on a page and when I’m developing read more I click, nothing happens, the mouse is working right squeegee the option of the same, this menu is housed in a panel that carries within a list ul li … well if there is a solution, would you direct me to where I can make changes in order to force the Read More for it to work …

    Oi Mary, parabéns pelo excelente trabalho aqui, e eu gostaria de perguntar para você se existe a possibilidade este exemplo aqui mostrado ter algum conflito com ostros scripts jquery e assim, vou ser especifico, eu instalei ele em uma página que estou desenvolvendo e quando eu clico em read more, nada acontece, o mouse está funcionando direito a opção da rodinho do mesmo, esse menu está acomodado em um painel que carrega dentro de uma lista ul li… bem se não há uma solução, gostaria que você me indicasse onde posso fazer alterações no sentido de forçar o Read More para que ele funcione…

  3. 3

    Good morning Mary lou! Thank you for all these examples! I have a problem with use of cufon in the carousel. The text fades. I don’t know where to put cufon.replace.. Thank you for your response !

  4. 4

    Is there a way to fix the bug issue when you open the widgets and slide them to the left. I am new to java and not very experienced. after you start sliding a few it seems to repeat the images or just have missing spots.

  5. 5

    Hello,

    i have a problem… How can i embed the circular content carousel in on a wordpress installation… any ideas?

    Thanx.

  6. 6

    Another amazing plugin! Never ceases to impress me. I need some help implementing a jsPane scroll bar in the content div. I’m currently having the same issue as Karen. I added the jsPane, but it seems that the carousel scroll feature is hijacking the jsPane scroll bar functionality after initiating the the content carousel navigation. Also, trying to figure out how to how bind the carousel to a nav menu. Any suggestions on how to bind a nav item click to the aux function? Thanks.

  7. 9

    Hey! I have 4 items in carousel and I changed file contentcarousel.js like wrote Pushpinder Bagga (just increased number of items in js). I open the fourth item, then closing the wrapper for fourth item but other files will not be returned to the place. This BUG only for fourth item and problem in contentcarousel.js, but I don’t know what else I must change there. Can someone help me?

  8. 10

    *clarification: I open the fourth item, then close the wrapper for fourth item but other items don’t return to the own places and finally I have fourth item on the screen and blank screen on his right.

  9. 12

    never mind, i figured it out, css folder was named CSS, so it didnt load anything from it :)

  10. 13

    OOh man! Where was I? I just got here through a link of collection of best jquery roundups, man have I been missing a lot of things!

    I have subscribed to your site.
    This one is just amazing! Just the thing that would be perfect for my new company’s website!

  11. 14

    Hi,

    I take off the slide mode to make a portfolio. I’de like to put 3 items on each row.

    How can I change the ccs (or js?) to put my 4th item at row number 2 and display?

    Thanks a lot for this awesome job!

  12. 15

    This plugin works great, I’ve been trying to impement ajax loaded content but the plugin doesnt seem to handle that the way I’m trying to do it (ajax pulls html which contains the div id=”ca-container” and all inner html) any suggestions on the easiest way to implement this?

  13. 17

    For autoscroll, just add to jquery.contentcarousel.js after the // adds events to the mouse functions
    for example …
    :

    setInterval(function() {
    aux.navigate( 1, $el, $wrapper, settings, cache );
    },2000);

  14. 19

    @Arnaud : great thank you, but there is some problem, the slide is scrolling forever. Maybe it will be good to add some code to stop the autoscroll after press the “read more”. And I dont know how.. :D

    @Mary : my problem is same with salva. Please give me a solution…

  15. 20

    Hi Mary, was just browsing through the source code and came upon your plugin call to the methods array. Could you please explain what this does?

    $.fn.contentcarousel = function(method) {
    if ( methods[method] ) {
    return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

    Why do you call it this way? What are the arguments that are referred to?

  16. 21

    hi
    @mary :thanks for your plugin

    @Arnaud : thank you, but the slide is scrolling forever how can we do to stop it ?

    thks

Comments are closed.