title: How to add triggers to a slider (flexslider) without changing core jQuery script?
body: <p>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 ( <a href="http://www.woothemes.com/flexslider/#highlighter_298">http://www.woothemes.com/flexslider/#highlighter_298</a> )</p>
  
  <p>Is there a way that allows me to fire a function when the slide changes?</p>
  
  <p>Here's the url of demo slider:
  <a href="http://flexslider.woothemes.com/thumbnail-slider.html">http://flexslider.woothemes.com/thumbnail-slider.html</a></p>
  
  <pre><code>    $(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"
        });
      });
  </code></pre>
  
  <p>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).</p>
  
  <pre><code>&lt;div class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li rel="divid1" class="flex-active-slide"&gt;
        &lt;img src="slide1.jpg" /&gt;
      &lt;/li&gt;
      &lt;li rel="divid2"&gt;
        &lt;img src="slide2.jpg" /&gt;
      &lt;/li&gt;
      &lt;li rel="divid3"&gt;
        &lt;img src="slide3.jpg" /&gt;
      &lt;/li&gt;
      &lt;li rel="divid4"&gt;
        &lt;img src="slide4.jpg" /&gt;
      &lt;/li&gt;
      &lt;!-- items mirrored twice, total of 12 --&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>