如何在不更改核心 jQuery 脚本的情况下向滑块 (flexslider) 添加触发器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19194000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add triggers to a slider (flexslider) without changing core jQuery script?
提问by Anon
I am faced with a situation where I have to fire an event when a slide changes however my slider does not support this. Both before and after are supported ( http://www.woothemes.com/flexslider/#highlighter_298)
我面临的情况是，当幻灯片发生变化时，我必须触发一个事件，但我的滑块不支持这一点。前后都支持（http://www.woothemes.com/flexslider/#highlighter_298）
Is there a way that allows me to fire a function when the slide changes?
有没有办法让我在幻灯片更改时触发功能？
Here's the url of demo slider: http://flexslider.woothemes.com/thumbnail-slider.html
这是演示滑块的网址：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"
});
});
In my slides, I have rel attribute that I would like to use when a slide is active (.flex-active-slide is added to active slide).
在我的幻灯片中，我有 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>
Current provision (before: and after:) allows you to grab the rel attribute of the slide before active slide. Is there a way to get rel attribute of active slide?
当前条款（之前：和之后：）允许您在活动幻灯片之前获取幻灯片的 rel 属性。有没有办法获取活动幻灯片的 rel 属性？
回答by DGS
The beforeor aftercallbacks allow you to bind a function to the event where the animation starts or finishes. So if you want to get the rel attribute of the active slide after the slide animation is over you can call it like so.
该before或after回调让你的功能结合到动画开始或结束的事件。所以如果你想在幻灯片动画结束后获取活动幻灯片的 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"
});
