How to trigger an event when changing slides

Question

I integrate flexslider into the site. http://flexslider.woothemes.com/index.html

Now I want to add a class before and after the current slide. Each time the current slide changes, the classes will be updated. I managed to do this 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, in this way, it will run a function every 100 milliseconds, which I find less reasonable. I do not intend to use any flexslider function, since I need to use it in another slider plugin in the future. I need a pure jquery solution. Any suggestion?

Answer 1

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

setTimeout Flexslider:

callabck

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

Answer 2

before: after: ,

before: function()
{

$('.gallery #slider li').removeClass('beforeCurrent afterCurrent');
}

after: function()
{
var current = $('.gallery #slider li.flex-active-slide');
current.prev().addClass('beforeCurrent');
current.next().addClass('afterCurrent');
}