CODEWITHSUNDEEP
javascriptjqueryjquery-cycle
Adam
Adam

Reputation: 9049

Executing function after every transition using Jquery Cycle Plugin

$(document).ready(function(){

var $container = $('#main_slider').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 4000
}); 

$container.children().each(function(i) { 
    // create input 
    $('#thumb-'+(i+1)).click(function() { 
            // cycle to the corresponding slide 
            $("#black-bars").animate({"top": ''+(i*76.5)+'px'}, "slow", "swing");
            $container.cycle(i); 
            return false; 
        }); 
}); 

});

I have simple slideshow that has side thumbs, and when they are clicked the black bars slide to their appropriate position to "highlight" it.

Now, this effect only occurs when the user manually clicks the thumb, so I want it to also animate automatically after each slide has transitioned.

I think Cycle has a After attribute that allows you to execute a function after every slide, however how would I create a counter or retrieve which slide "number" it is currently on? I need it to determine what the position should be for the black bars.

Thanks

Upvotes: 1

Views: 3550

Answers (1)

Zero
Zero

Reputation: 738

You can use options 'before' and 'after' for this. Both of these callback functions pass current slide and next slide as parameters. Check this example: http://jquery.malsup.com/cycle/int2.html

Upvotes: 3

Related Questions