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

    Plugin very good, but it is quite a serious problem. I wanted to combine it with the scroll (http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html). Unfortunately scrolling does not work. Scrollbar is converted, but it does not move the contents (without the carousel works fine). The same situation applies Cufon. I have 3 items. Sometimes both Cufon and scroll work, but no longer do that when implementing the next 4-5 times (or more than the number of items). This problem is quite troublesome, because you can not use any other script working properly with the carousel. I will be grateful for a solution. Perhaps with such a problem has already met someone and share the solution.

  2. 3

    Hey, just wanted to throw it out there that if there is more written content in the expanded box than there is initially room for, the scroll wheel sliding function won’t allow the user to scroll through what is written. Is there an easy way to fix this? The whole script loses a lot of use if there isn’t a way to have an ever-expansive post.

    • 4

      Just adjust the height of the containers in the css and you can fit the extra content in the slide panels its not the perfecxt solution but it will fix your problem

    • 5

      That doesn’t help at all. I think I might have solved it with an ‘overflow-y:scrolling’ but I haven’t tested it and I have a feeling the scrollwheel binding will interfere with navigating through the overflowed content. The reason your answer isn’t useful is that it assumes that all of my content is static and not dynamically loaded.

  3. 6

    I also would like to try get this scrolling and tried arnaulds suggestion it works until u click the more or the arrows, would need a function to stop the scrolling at this point. Anyone figured that out?

  4. 10

    Nice little slider, this website is brilliant a big thank you for all the help and cool bits you have given me!! Thanks again!

  5. 11

    Wonderful script!

    I’m using it and no problems, however I need to have some sort of goto() slide… so I could attach it to some buttons outside of the carousel.

    I have tried this and didn’t work, I guess I’m pretty close but dont know what’s next…

    $.fn.gotoItem=function(element, n, d){
    var $el = $(element),
    $wrapper = $el.find(‘div.ca-wrapper’),
    $items = $wrapper.children(‘div.ca-item’),
    cache = {};

    // save the with of one item
    cache.itemW = $items.width();
    // save the number of total items
    cache.totalItems = $items.length;
    cache.expanded = true;
    cache.gotoItem = true;
    cache.idxClicked = n;

    var dir = (d === 1 || d === -1)?d:1;
    var settings = {};
    settings.scroll = 1;
    if( cache.isAnimating ) return false;
    cache.isAnimating = true;
    aux.navigate( dir, $el, $wrapper, settings, cache );
    return true;
    }

    and call it like this:

    var carousel = $(‘#ca-container’).contentcarousel({sliderSpeed : 2000});

    $(‘#button1’).click(function(){
    carousel.gotoItem(‘#ca-container’, 1,-1);
    });
    $(‘#button2’).click(function(){
    carousel.gotoItem(‘#ca-container’, 2,-1);
    });

    Thanks for your help

    • 12

      Hiiii Tim,

      Do you have find a solution finaly ? Because, i try to resolve this script but i turn around :(
      Thanks for your reply.

      Best regards,

      Jérémy

  6. 13

    How to stop Arnaud’s autoscroll?

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

    Using function clearInterval? plz, help!!!

  7. 14

    Sir Z (cc-Mike Green) —
    I tried the fix you provided to Mike Green (Nov 2011) to add a lightbox-type module to the code. I obviously didn’t implement it correctly because it jumbles the functions and look of the carousel completely.

    Were either of you successful in placing a lightbox gallery within the carousel? and if so, would you mind sharing the code mark-up with me? I love this carousel, but ideally need it to offer additional image viewing options.

  8. 17

    Wonderful script!!!

    I’m trying to modify it a bit, but no luck. Is there a way to expand an item( the left most item) by default on page load?

    Thanks!

  9. 18

    After research, I have found a solution to stop Bugs in IE9, (Which happened before, if you close 1 expaned block (not the 1st one), some block missing etc.):

    The first thing to do is upgrade to the latest version of jQuery – it looks like you’re currently using jQuery v1.4, but IE9 support was only introduced in v1.5.1.

    Update: if the IE9 Developer Tools don’t reveal any script errors, and the code is still not displaying properly for you, you can always force IE to render your website in IE8 mode. Add the following meta tag between the tags on every page which contains the slide show:

  10. 19

    The first thing to do is upgrade to the latest version of jQuery – it looks like you’re currently using jQuery v1.4, but IE9 support was only introduced in v1.5.1.

    Update: if the IE9 Developer Tools don’t reveal any script errors, and the code is still not displaying properly for you, you can always force IE to render your website in IE8 mode. Add the following meta tag between the tags on every page which contains the slide show:

  11. 21

    Hey! Cool script, I’m totally gonna use it on our website.
    I have one comment though, when loading a heavy page, the javascripts are last to load.
    There is a small delay between loading the list of content, and the javascripts which causes
    the list of divs to show completely on screen, and they’re hidden only after the javascript is
    fully loaded.
    I have removed the wrapper’s css property “overflow: hidden” from the javascript and
    moved it to the css. This way it loads faster and hides the area of the carousel that is
    suppose to be hidden while page is loading (before loading the javascripts).

    Other than that – it’s a cool scripts, thanks!! ;-)

    • 22

      Oh, by the way – I was styling my website right-to-left, and had to change
      the directions on your javascript file from ‘left’ to ‘right’. I noticed you have
      used the position() function to get the current item’s position from the left
      edge:
      $item.position().left

      Since position() has only “left” and “top” properties, I couldn’t use it on my
      website and had to get the value of the position from “right” using this:
      parseInt($item.css('right'))

      I recommend using either generic functions which will allow easy changes
      or better – implement the direction thing yourself and allow changing it by
      sending an argument.

      And again – thanks for the script, it’s awesome!!

Comments are closed.