如何在幻灯片更改时触发事件

Question

我正在将flexslider集成到网站中。 http://flexslider.woothemes.com/index.html

现在，我希望在当前幻灯片之前和之后添加一个类。每当当前幻灯片更改时，类都将更新。我设法使用以下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');
  }

然而，这样它每隔100毫秒运行一次这个功能，我觉得不太合理。我不打算使用flexslider提供的任何功能，因为我需要将来应用于其他滑块插件。我需要纯粹的jquery解决方案。有什么建议吗？

Answer 1

  

我希望在当前幻灯片之前和之后添加一个类？

而不是使用setTimeout使用Flexslider的回调函数：

  

之前已经 之后 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
});

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