From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!
@craig, what i meant was swiping event for the carousel.
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?
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!
any idea to automate motion from beginning witout any click?
@Brent – the issue is with your “” ‘s
There is a inserted in ca-item-2
Hope this helps!
@Maquetador
You can use the set timeout function along with the function below to do so
aux.navigate( 1, $el, $wrapper, settings, cache );
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
@PUSHPINDER BAGGA – Thanks for taking time to look. I’m not sure that I follow – could you be a little more specific?
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 !
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.
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 .
@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.
Is it possible to add the ability to auto rotate, with pause on mouseover to the carousel?
one word to describe it. awesome. will use it soon.
Great work !
Tnkx !
😉
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?
Nice work…
Hi, it is possible to use this in an opencart shop template I`m working on ? Cheers
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
Hi i am trying to use two slideshows in one page, but the only second one (yours slideshow ) works how i should make them both work properly ? thanks for the answer:) P.S great slideshow 🙂
http://komota.net76.net/index.php
thanks
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!
I found a solution: I added body-onload to the body-tag:
and placed the loading spanner below the left arrow using CSS
Amazing..
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?
Great Work !
Any idea to put multiple carousel in one page ?
Hi Mary, any suggestion about dynamical change content.
I mean when someone click to link
content of div ‘ca-wrapper’ update without reload page.
Thanks, I found solution by myself.
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?
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 🙂
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
I made 30 items it works perfect.
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 :/
Hi Mike,
Nothing difference in JS code but put extend your html code
…
…
…
…
…
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!
Very nice article!Very nice plugin!Congratulations Mary Luo!This iniciative is very important to the web community!Thanks!
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?
Forget about my post, @Pushpinder Bagga explained that earlier! Brilliant, thanks Pushpinder Bagga!!!
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…
@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…
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
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!
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?
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
Hi Mike,
I used SimpleModal plugin. Look at screenshots.
Changes in html:
http://s12.postimage.org/ib2gkrjjx/thumb2.jpg
Changes in js code
http://s7.postimage.org/445iisocr/thumb1.jpg
thanks so much, very grateful for your help 😀
This is pretty cool! I added MagicEdit CMS to this. Check it out here: http://template.magicedit.com/carousel/
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! 🙂
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?
How we can autoscroll at the beginning ? can you integrate an automatic scroll