Circular Content Carousel with jQuery

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

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

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!

Hi Lugas,

Look to the JS script at picture. It might give you an idea.
http://postimage.org/image/ombn965ab/

I also used ajax to load data from xml file.

Thanks Sir Z.
I’ll try this tonight and hopefully get it working.

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?

Its Just AWESOME!! Thank you very much!

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.

Wow, awesome! Thanks for sharing!

Hi,

Nice artical

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

Hi, how do i make the arrows move 3 items instead of 1?

I’ve done a quick pause on hover to Arnaud’s autoscroll function..

/* auto scroll, pause on hover */
var autoscroll = setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},5000);
$(this).find(‘div.ca-wrapper’).hover(function(){
autoscroll = clearInterval(autoscroll);
}, function(){
var autoscroll = setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},5000);
});

Very nice library just that it has an issue with zoom-in where the navigation fails.
Thanks!