How to fire an event when a slide change

Question

I am integrating a flexslider into a site. http://flexslider.woothemes.com/index.html

Now, I wish to add a class before and after to the current slide. Every time when the current slide changes, the classes will be updated. I managed to do it with the following jquery:

  setInterval(checkCurrent, 100);

  function checkCurrent(){
    $('.gallery #slider li').removeClass('beforeCurrent afterCurrent');

    var current = $('.gallery #slider li.flex-active-slide');

    current.prev().addClass('beforeCurrent');
    current.next().addClass('afterCurrent');
  }

However, this way it will run the function every 100 milliseconds which I think less sensible. I don't intend to use any function flexslider provides as I need to apply the same to other slider plugin in the future. I need purely a jquery solution. Any suggestion ?

Answer 1

I wish to add a class before and after to the current slide?

Instead of using setTimeout use callback function of Flexslider:

There is already before and after callabck function Details

$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    start: function(){},// Fires when the slider loads the first slide
    before: function(){},// Fires asynchronously with each slider animation
    after: function(){},// Fires after each slider animation completes
    animationLoop: false,
    slideshow: false
});