如何在不更改核心jQuery脚本的情况下向滑块(flexslider)添加触发器?

前端之家收集整理的这篇文章主要介绍了如何在不更改核心jQuery脚本的情况下向滑块(flexslider)添加触发器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我面临的情况是,当幻灯片更改但我的滑块不支持此操作时我必须触发事件.支持之前和之后( http://www.woothemes.com/flexslider/#highlighter_298)

是否有一种方法可以让我在幻灯片更改时触发功能

这是演示滑块的网址:
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",animationLoop: 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属性

解决方法

回调之前或之后允许您将函数绑定到动画开始或结束的事件.因此,如果要在幻灯片动画结束后获取活动幻灯片的rel属性,可以这样调用它.
$('#slider').flexslider({
    animation: "slide",after: function(){
        var active_rel = $(this).find('.flex-active-slide').attr('rel');
        //do something
    },sync: "#carousel"
});

猜你在找的jQuery相关文章