CODEWITHSUNDEEP
jquerycyclecarousel
NickOpris
NickOpris

Reputation: 559

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 +'">&nbsp;</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').cycle({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.

Upvotes: 1

Views: 3623

Answers (1)

morganney
morganney

Reputation: 13580

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

Upvotes: 3

Related Questions