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:
Post a Comment