注册 | 登录

解决javascript - jquery cycle slideshow - adding slide prev/next progression (a la scrollHorz) along with custom animation

itPublisher 分享于



I am using the jquery cycle plugin with a custom animation. It is working great!

However, I would like the slides to advance to the right or left depending upon the index#, i.e. if the user clicks on link 1 while slide #3 is the active slide the animation will transition out to the right, while if link 4 was clicked on the slide would transition to the left.

The functionality I'm looking for is the same as the scrollHorz/scrollVert transitions.

I understand that what I need is some logic to relate the current frame and the next frame: if (frameclicked on is a higher index than the current slide) {animate to the left} else {animate to the right}

I just don't know where to put it in the code. I hope that makes sense. Any help would be greatly appreciated! Thanks!

Not that it probably helps, but my custom code is below.

$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'custom',

    speed:  'slow',
    easeIn: 'easeInExpo',
    easeOut: 'easeInExpo',
    next: '.nextnav',
    prev: '.previous',
    timeout: 0,
    containerResize: 1,
    fit: 0,
    height: 600,
    pager: '#slideshow-nav',
    pagerAnchorBuilder: function(idx, slide) {
            return '#slideshow-nav li:eq(' + (idx) + ')';

javascript jquery jquery-plugins cycle jquery-cycle
  this question
edited Sep 26 '12 at 2:33 Eli 13.2k 5 45 73 asked Apr 17 '11 at 20:13 Jackrabbitrocks 28 1 7


2 Answers


You need to hook into to onPrevNextEvent. They have something called isnext wich gets passed wich basically tells you which direction you are going in.

Example I updated a fiddle I whipped up yesterday for cycle.

$(function() {

    next : "#next",
    prev : "#prev",
    timeout : 0,
    onPrevNextEvent: function(is,i,el) {
        if (is === true) {
            alert('slide right');
        else {
            alert('slide left'); 



  this answer
answered Apr 18 '11 at 4:31 wesbos 11.3k 21 76 122      Thank you so much for your help! I really appreciate you taking the time to look at this. It is certainly a step in the right direction. I'm still in need of understanding how to access the animating function from within the conditional statement - or to use information from the conditional. So, would I replace the alert in your example above with the function to animate? Or could I pass a variable to aniIn/aniOut? I'm afraid I'm still unclear about how that would look. –  Jackrabbitrocks Apr 19 '11 at 18:44      Also, would the onPrevNextEvent work for the auto-generated pager links or just for the p/n buttons? I really wish there was some kind of documentation on this plugin. I'm sorta surprised considering it has been out for so long. –  Jackrabbitrocks Apr 19 '11 at 18:49


Isn't what you're describing part of Cycle's core functionality?

Here's how I do it:

    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     

  this answer
answered Jun 15 '11 at 17:07 Doron 21 1      hmm, I see what she's trying to do and I have the same question... I have no problem using scrollHorz... i do all the time.. the project I'm working on needs the current slide to slide off the screen (right or left) but also with a fade out effect on the that exiting slide... the "onPrevNextEvent" seems almost perfect.. the animOut, animIn works great too.. but I cannot set a right or left outro to any of them.. just one direction.... :( any ideas anyone? –  Abbey Jul 23 '13 at 1:12









您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱