jQuery cycle -- destroyed a cycle with autostop, restarted it, now it stops on the 2nd slide instead of going through them all

Question

I have a jQuery cycle slider (.team_spotlight) that has 9 slides. It is set to autostop. After autostop, it should trigger a custom function that destroys the slider, then restarts everything.

The first time the slider goes through all 9 slides, it works great. However, after the slider is destroyed, then restarts, it stops on the second slide, instead of cycling through all 9.

The reason for this weird setup is I have a custom class ("flip") being added to my pager each time a slide advances. You can envision my pager like this -- Active page is yellow, previous pages are red, upcoming pages are green. I also insert unique IDs into each page so I can do a few more style things.

Once I'm done with all the slides, I need to reset my pager because I need all the pages to be green again when we loop back around to the first slide. Hence, the destroy and restart of the cycle.

If there is a better way to achieve this color effect (without having to destroy the slider), I'm all ears. Otherwise, I need a fix as to why the cycle gets "stuck" on the second slide after being destroyed and restarted.

My javascript:

function paginate(ind, el) {
    return '<a class="slidenav" id="slide' + ind + '"></a>';
}   

function shifttab() {
    $('.activeSlide').addClass('flip');
}

function resettabs() {
    $('.team_spotlight').cycle('destroy');
    tabsanim();
}

function tabsanim() {
    $('.team_spotlight').cycle({
        fx: 'fade',
        pause: 1,
        speed: 0,
        timeout: 4000,
        cleartypeNoBg: true,
        pager:  '#pagernav',
        pagerAnchorBuilder: paginate,
        pagerEvent: null,
        after: shifttab,
        autostop: 1,
        end: resettabs
    });     
}


$(document).ready(function() {
    tabsanim();
});

EDIT:

The destroy bug still stands, and it would be useful to fix it.

However, I've been able to duplicate the effect I want by manipulating my current page and its siblings. I no longer have a need to destroy and restart the slider.

Hi, I submitted a bug report (with a possible fix): https://github.com/malsup/cycle/issues/108 — biziclop, Apr 10 '12 at 08:56

bdhac · Answer 1 · 2012-01-26T22:23:59.063

0

Try to comment out or remove the line:

autostop: 1,

in tabsanim()

Here the new function ...

function tabsanim() {
    $('.team_spotlight').cycle({
        fx: 'fade',
        pause: 1,
        speed: 0,
        timeout: 4000,
        cleartypeNoBg: true,
        pager:  '#pagernav',
        pagerAnchorBuilder: paginate,
        pagerEvent: null,
        after: shifttab,
        end: resettabs
    });     
}

................. The following timer DID NOT solve the problem, but the above change solved it

function resettabs() {
    $('.team_spotlight').cycle('destroy');
    setTimeout("tabsanim()",300);
    }

edited Jan 26 '12 at 22:23

answered Jan 26 '12 at 21:17

bdhac

359
4
5

Nope, didn't fix it. Same behavior. – Jamie Jan 26 '12 at 21:24
OK. Nevermind the timer, I tested your code by removing the option attribute autostop: 1, see the my answer above – bdhac Jan 26 '12 at 22:17
My first iteration, I needed the autostop. I no longer do (see my edit), and consequently, don't even need to destroy anything. Still not sure what caused the original bug, though. – Jamie Jan 26 '12 at 22:26

jQuery cycle -- destroyed a cycle with autostop, restarted it, now it stops on the 2nd slide instead of going through them all

1 Answers1