Come aggiungere trigger a un dispositivo di scorrimento (flexslider) senza modificare lo script jQuery di base?

Question

Sono di fronte a una situazione in cui devo attivare un evento quando una diapositiva cambia, ma il mio cursore non supporta questo. Sono supportati sia prima che dopo (http://www.woothemes.com/flexslider/#highlighter_298)

C'è un modo che mi consente di attivare una funzione quando la diapositiva cambia?

Ecco l'url del cursore demo: http://flexslider.woothemes.com/thumbnail-slider.html

$(window).load(function() { 
     // The slider being synced must be initialized first 
     $('#carousel').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     start: function(){},   //Callback: function(slider) - Fires when the slider loads the first slide 
     before: function(){},   //Callback: function(slider) - Fires asynchronously with each slider animation 
     after: function(){},   //Callback: function(slider) - Fires after each slider animation completes 
     animationLoop: false, 
     slideshow: false, 
     itemWidth: 210, 
     itemMargin: 5, 
     asNavFor: '#slider' 
     }); 

     $('#slider').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     sync: "#carousel" 
     }); 
    }); 

Nelle mie diapositive, ho attributo rel che vorrei utilizzare quando una diapositiva è attivo (.flex-attiva-slide è aggiunto attiva diapositiva).

<div class="flexslider"> 
    <ul class="slides"> 
    <li rel="divid1" class="flex-active-slide"> 
     <img src="slide1.jpg" /> 
    </li> 
    <li rel="divid2"> 
     <img src="slide2.jpg" /> 
    </li> 
    <li rel="divid3"> 
     <img src="slide3.jpg" /> 
    </li> 
    <li rel="divid4"> 
     <img src="slide4.jpg" /> 
    </li> 
    <!-- items mirrored twice, total of 12 --> 
    </ul> 
</div> 

Fornitura attuale (prima: e dopo :) consente di acquisire l'attributo rel della diapositiva prima della diapositiva attiva. C'è un modo per ottenere l'attributo rel della diapositiva attiva?

Answer 1

I callback before o after consentono di associare una funzione all'evento in cui inizia o termina l'animazione. Quindi se vuoi ottenere l'attributo rel della diapositiva attiva dopo che l'animazione della diapositiva è finita puoi chiamarla così.

$('#slider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    after: function(){ 
     var active_rel = $(this).find('.flex-active-slide').attr('rel'); 
     //do something 
    }, 
    slideshow: false, 
    sync: "#carousel" 
});