How to add triggers to a slider (flexslider) without changing core jQuery script?

Question

I am faced with a situation where I have to fire an event when a slide changes however my slider does not support this. Both before and after are supported ( http://www.woothemes.com/flexslider/#highlighter_298 )

Is there a way that allows me to fire a function when the slide changes?

Here's the url of demo slider: 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"
      });
    });

In my slides, I have rel attribute that I would like to use when a slide is active (.flex-active-slide is added to active slide).

<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>

Current provision (before: and after:) allows you to grab the rel attribute of the slide before active slide. Is there a way to get rel attribute of active slide?

Answer 1

The before or after callbacks allow you to bind a function to the event where the animation starts or finishes. So if you want to get the rel attribute of the active slide after the slide animation is over you can call it like so.

$('#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"
});