Wednesday, October 1, 2008

[jQuery] jCarousel scroll by 4 breaks in tail section

I'm having a strange problem with a customised jCarousel I'm working
on.

The carousel has 16 dynamically loaded items, 4 are visible and it
scrolls by 4. The prev/next buttons are custom and wrap is set to
both.

Everything works fine until it gets to the 4th page of items, where it
will only scroll in 3 more items, making the last item from the 3rd
page become the first item of the 4th page leaving the very last item
still hidden until you click next - it will then scroll by 1 to
display the last item.

After this point, if you click next again it will wrap to the start as
intended.

I've tried logging the values of the carousel.first / carousel.last to
firebug with some inconsistent results.

When it first loads, carousel.first is set to 1 and carousel.last is
5.
Click next and carousel.first becomes 5 and carousel.last becomes 8
(which I dont think is correct).
Click next again and carousel.first is now 9 and carousel.last is 12
(its acting like scroll option is set to 3).

Anyone come across something similar before?

My code:

$jQ('#featured-carousel').jcarousel({

scroll: 4,
visible: 4,
wrap: 'both',
buttonNextHTML: null, buttonPrevHTML: null, //dont build
buttons - we use custom ones
animation: 1200,
itemLoadCallback: {
onBeforeAnimation: itemLoadCallback,
onAfterAnimation: setPageBoxStyle // styling stuff
}

});

function itemLoadCallback(carousel, state) {
if (state != 'init') {
return;
}

// next button
$jQ('.carousel-next').bind('click', function() {
carousel.next();
setPageBoxStyle(carousel);
return false;
});

// previous button
$jQ('.carousel-prev').bind('click', function() {
carousel.prev();
setPageBoxStyle(carousel);
return false;
});


// remote dwr method with call back to get items
RemotedFeatures.listFeaturedReleases(

function( releases ) {

$jQ(releases).each(
function(i){
carousel.add(i, getItemHTML(this));
}
);

carousel.size(releases.length);
}
);

}

No comments: