jquery - 如何在不更改核心 jQuery 脚本的情况下向 slider (flexslider) 添加触发器？

Question

我面临着一种情况，当幻灯片发生变化时我必须触发一个事件，但我的 slider 不支持这一点。支持之前和之后 ( http://www.woothemes.com/flexslider/#highlighter_298 )

有没有一种方法可以让我在幻灯片更改时触发函数？

这是演示 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"
      });
    });

在我的幻灯片中，我想在幻灯片处于事件状态时使用 rel 属性(.flex-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>

当前设置(之前:和之后:)允许您获取事件幻灯片之前幻灯片的 rel 属性。有没有办法获取事件幻灯片的rel属性？

Answer 1

before 或 after 回调允许您将函数绑定(bind)到动画开始或结束的事件。所以如果你想在幻灯片动画结束后获取事件幻灯片的rel属性你可以这样调用。

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