Change slide direction according to pager item clicked (jquery cycle)
I need some help getting the jquery cycle plugin to work as below:
Basically, I use pager and not left/right buttons. I need to slide from right to left when clicking on a forward pager item and to slide in reverse(from left to right) when clicking on a previous pager item.
My setup is basic, as on http://jquery.malsup.com/cycle/ .
It might be a simple one but I could not find a way to do it yet.
if (jQuery.isFunction(jQuery.fn.cycle)) {
$('.mycarousel').cycle({
fx: 'scrollLeft',
pager: '#titleindicators',
pagerAnchorBuilder: paginate,
pause:1,
timeout: 5000
});
}
function paginate(ind, el)
{
return '<a href="#'+ ind +'"> </a>';
}
I tried using onPagerEvent with no luck:
var cs=0;
function onClicky(zeroBasedSlideIndex, slideElement){
if(cs-zeroBasedSlideIndex<0){
$('.mycarousel').cycle({fx: 'scrollLeft'});
}
else{
$('.mycarousel').c开发者_如何学Goycle({fx: 'scrollRight'});
}
cs = zeroBasedSlideIndex;
}
Otherwise, the plugin works ok but it's really annoying to click on a previous pager item and see it coming in like it's moving forward.
Change the fx property to 'scrollHorz' (or 'scrollVert' if you want to move in the vertical direction).
jquery cycle pager transitions
jquery cycle scrollHorz/scrollVert demos
精彩评论