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 August 16, 2011

Demo Download

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

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.

carousel circular slider

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ¹⁵³

Comments are closed.

Selva August 16, 2011 at 18:34

yet another killer… you are making some serious things to jquery. I think i’m gonna use this in my next template.
Selva August 16, 2011 at 18:39

But a small bug in IE. its fallback the last slide wrongly. please check the demo again.
Imran August 16, 2011 at 18:40

There are bugs in this demo. When you open a penel that is not on left most part of slider and then closes it the whole behaviour of slider changes and it starts repeating same slides. Other than that its good.
sami August 16, 2011 at 18:40

really awesome !
Mary Lou August 16, 2011 at 18:48

Hi all, thanks for your feedback!
@Imran, I cannot recreate the problem that you are describing, please note that the text is repeated throughout the expanded content areas. The headlines are not though, could you check that again?
@Selva what do you mean with fallback? And what exactly is wrong with it and which IE version are you using? Thanks and cheers, ML
choco August 16, 2011 at 18:50

genia !
hazArt August 16, 2011 at 18:59

this is just AWESOME!!
i have no problem in my IE… i’ve just 2 warning error for position left and top with firebug…
thanks for your great work!
Félix August 16, 2011 at 19:12

Awesome, as always !
dimas August 16, 2011 at 19:17

this is astonishing effect,,,u’re the guru Marie 😀
galeazzo August 16, 2011 at 19:22

extra. Comme dab.
Merci Marylou
Trabajo August 16, 2011 at 19:31

Another amazing script jQuery. Fantastic circular content.
Outsource Web Development August 16, 2011 at 19:48

amazing.. and surprisingly, its very simple to implement & light weight on pages…

does it work across all browsers
Selva August 16, 2011 at 20:00

i double checked by using IE7,8,9. The problem is in,
After loading all items just you click on the “more” button of third container (ca-item-main). It opens the content wrapper to its right. Then if you close that wrapper by pressing “X” in the top. Then you see the problem. It doesn’t show the things correctly.

But besides its a nice one. You did a good job mary lou. 😀
Dejan: Izdelava spletnih strani August 16, 2011 at 20:22

Thank you very much! I love this one a lot!
Robur August 16, 2011 at 22:05

Thank you, Mary Lou! I love it.
Steve Cook August 17, 2011 at 05:24

So streamlined. Great job on the markup. The “card” layout and typography is gorgeous.
Michel August 17, 2011 at 08:46

Thank you so much for your inspiration, Mary Lou!
namik August 17, 2011 at 10:18

Great tutorial as always, thank you for your hard work.
Brian Kraemer-Banks August 17, 2011 at 10:55

I guess one solution to IE problems is to not use IE. Great tutorial, Mary-Lou, as always.
bono August 17, 2011 at 11:01

superb! i might use this in my next project! thanks for sharing this jquery
Sam August 17, 2011 at 13:19

Can’t replicate the problems mentioned on IE8 – has it been fixed?
Mary Lou August 17, 2011 at 13:51

@Selva, I tried in IE7/8/9 and I simply cannot see any problem… A screenshot would be great to see what happens! Thanks and cheers, ML
lalapo August 17, 2011 at 14:21

i create a 3 carousel in one page with different id, all carousel are use the last ca-item quantity, how to fix it?
- Mary Lou August 17, 2011 at 14:44
  
  @lalapo Could you download it again and replace the js file? Let me know if it works!
Aakash August 17, 2011 at 14:46

omg i m love with its simplicity!! 🙂
lalapo August 17, 2011 at 14:57

Hi Mary, love it, its work like a charm! thank you
raf August 17, 2011 at 15:26

awesome awesome :::)
greg August 17, 2011 at 16:23

Awesome tut, gunna use this on my website!

Cheers =0
Darwin Mateos August 17, 2011 at 19:59

Excellent slide!!!, very functional and simple 😉
Helmi August 18, 2011 at 04:01

Great tutorial! Will there be a touch enabled version?
Paul August 18, 2011 at 04:13

Hi Mary Lou i´m giving the first steps developing websites,and i´m learning a lot on this site,My question is can we use the content for building websites for other people??Comercial use?
Great tutorial.
Rahmat Irfan Denas August 18, 2011 at 11:24

Very very cool..
Craig August 18, 2011 at 12:01

@marylou

Looking at the js file.
where can I change it, so the slide takes over the whole container, sliding the left panel off screen?

Cheers
Craig August 18, 2011 at 12:02

@HELMI

Works fine on an iPad
neki chan August 18, 2011 at 14:53

extremely cool ^^
great work ^^b
John Nerush August 18, 2011 at 15:47

Brilliant script!

I am trying to modify it to show 5 items at once (the whole thing is still 990px wide).

I can get the 5 items to show fine however I cannot get the “Show More” box to stretch the whole width, it is only going the distance of 3 boxes.

Is it possible to either have the script auto detect how many are showing or provide a variable/option for how many items you wish to display or even just hint me in the right direction of what needs to be edited?

Many thanks
marius August 18, 2011 at 19:45

I was looking at some point for a circular carousel and I wasn’t happy with what I found. This one looks really good!

Thumbs up for the content for the slides 😀
misaeljuvenal August 18, 2011 at 22:02

gran aporte.. sigan adelante..;)
Vullnet August 18, 2011 at 23:50

great article as usual.. 🙂
Michael August 19, 2011 at 05:43

Great carousel!

Is there any way to adjust is so that instead of having to click the “more” links, a click anywhere on an item will cause it to slide open?

Thanks,

Michael
Abhisek August 19, 2011 at 07:19

Awesome! I love its simplicity. Cheers!
Alan August 19, 2011 at 10:17

Once Again you never fail to impress, variations of this simple carousel are surely going to start popping up all across the web. The more tab is a nice touch. Keep up the Good work Mary Lou, I look forward to seeing what you come up with next time!
edis August 19, 2011 at 15:53

Hi Mary Lou,
this is impressive.
Sorry to tell you, i accidently found a bug:once you click the ?read more’ link and the green box with the paragraph text appears, you should disable scrolling and the next/previous button, ’cause wright now if i scroll after a while there is nothing to scroll, every item dissappears. Also, if i close the green box, after scrolling a bit with the box open, after returning all the items are doubled?
Using latest Chrome version, hope it helps 🙂 Keep it up 🙂
assadotcom August 19, 2011 at 22:38

Awesome!!!
Tweet Like +1 ^_^
west4me August 20, 2011 at 07:50

I am loving this! I am a true novice to js and was wondering if there is a way?

I see that the html for the navigation arrows is contained within the js file.

Is there a way for me to create a link outside of the js file that when clicked it will slide to a certain slide?
Selva August 20, 2011 at 14:04

Hi Lou,

Here is a screencast. There you may see the exact problem..

http://www.screenr.com/WKgs
AlQamar August 20, 2011 at 19:44

Fluid, easy to use, functional, ergonomic design…
Good inspiration

Bonne continuation ML.
Mary Lou August 21, 2011 at 13:37

@Selva Thank you for recording that! That’s very strange indeed, did anybody else experience that same problem? Cheers, ML
- 3bmbm3 March 13, 2012 at 03:58
  
  Mary I have the same issue like Selva has, it happens only IE9 though, not even IE8.
  
  Strange, Maybe IE9 has bugs on jQuery code ? While older IE 8 doesn’t have the same problems ?
Pushpinder Bagga August 21, 2011 at 15:41

Hello John Nerush

I think your suggestion is a good one, we should have an option as to how many items to be shown in the carousel.

Albeit, here is a temporary solution you seek.

I tried with 4 items and these are the lines I had to change.

LINE 12

factor = 4;

LINE 54

width : cache.itemW * 3 + ‘px’,

LINE 78
$item.css( ‘left’, – ( openedIdx – idx ) * ( cache.itemW * 4 ) + ‘px’ ).show().find(

LINE 80
width : cache.itemW * 3 + ‘px’

Add the below after LINE 135

case cache.itemW * 3 : return 4; break;

And then from LINE 170 to LINE 178

change all 3’s to 4

Finally modify

.ca-container{
width:980px;
}
.ca-item{
width:245px;
}

A little calculations and logical thinking could give you solutions to N number of items.

Hope this helps!

Cheers to Mary Lou!
Pushpinder Bagga August 21, 2011 at 15:55

@ML

What I was wondering is instead of this complex logic (for beginners like myself) couldn’t we just keep the carousel repeating and on click of an item, clone it, animate it to the left, increase the width of the description, make its z-index higher and simply hide the main carousel.

A simple yet effective solution… what you recon?
aLex August 21, 2011 at 16:47

Hey Mary,

will u Mar’r’y me ? : )

The HTML Structure

Manoela Ilic

Crafting a Dice Roller with Three.js and Cannon-es

Creating a Risograph Grain Light Effect in Three.js

On-Scroll Letter Animations

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

Feedback 153

Feedback ¹⁵³