Question

$('.rotateme').cycle({fx:'fade',speed:2500,timeout:3000,next:'#arrowright',prev:'#arrowleft',sync:1,pause:1});

Hai dudes, the code above is what I am using for an image slider, where images fade in a cycle (that was obvious).

Anyway, this is what happens:

When it’s cycling through the li elements, the previous button returns me to the li element that has just faded out and then continues down the list.

What I want to be happening:

I want the previous button to return me to the previous element AND reverse the direction, so it would not be going back down the list, but instead would go up.

The obvious solution is to make a separate bind for the #arrowright using:

rev:           0,     // causes animations to transition in reverse 

This works to a degree and fails here: if I click #arrowright again, it will reverse the direction again (doh) meaning that #arrowright is actually a toggle button and I do not need that…

Any suggestions?

Answer 1

//This snippet will add a class ‘selected’ to “#arrowRight”, and remove a class “selected” from “#arrowLeft”. Then, when you run the .cycle() it will see if “#arrowRight” has the class ‘selected’, and if that’s true, then .cycle() will run without the rev: 0 variable. Otherwise, it will reverse normally. When the user clicks on “#leftArrow” the class ‘selected’ will be removed.

if($("#arrowRight").hasClass("selected")) {

$('.rotateme').cycle({
    fx:'fade',

    speed:2500,
    timeout:3000,
    next:'#arrowright',
    prev:'#arrowleft',
    sync:1,pause:1 

});
}


else{
$('.rotateme').cycle({
    fx:'fade',

    speed:2500,
    timeout:3000,
    next:'#arrowright',
    prev:'#arrowleft',
    sync:1,pause:1
    rev: 0
});
}


$("#arrowRight").click({
    $(this).addClass({"selected"}); 
    $("#arrowLeft").removeClass({"selected"});
});


$("#arrowLeft").click({
    $(this).addClass({"selected"}); 
    $("#arrowRight").removeClass({"selected"});
});