如何为基础Orbit Slider调用onChange函数？

Question

我有一个基础轨道滑块。 我试图在轨道图像改变时调用一个函数。 在ready.fndtn.orbit下面的jquery中工作。 但是，滑后更换不会触发。 Foundations文档对此问题没有帮助。非常欢迎您提出任何建议或帮助

<ul id="featured1" class="no-bullet example-orbit" data-orbit data-options="animation:fade;
    timer: false;
    slide_number: false;
      pause_on_hover:false;
      animation_speed:800;
      navigation_arrows:true;
      bullets:false;">

    <li id="slideImg1">
        <a href="training/hygiene.cfm"><img src="img/slide5.png" alt="stuff here"></a>
    </li>

    <li id="slideImg2">
        <a href=""><img src="img/slide6.png" alt="See a Demo of the CIS-CAT Assesment Tool" ></a>
    </li>
    <li id="slideImg3">
        <a href=""><img src="img/slide7.png" alt="The Critical SecurityControls are now available in Japanese"></a>
    </li>
</ul>


<script>
    $(document).on('ready.fndtn.orbit', function(e) {
            captionFunction();
        });
        $(document).on('after-slide-change.fndtn.orbit', function(e) {
            captionFunction();
        });
</script>

Answer 1

根据我在Foundation文档中看到的内容，在您的情况下，您似乎想选择ul元素来添加事件处理程序： $("#featured1").on("after-slide-change.fndtn.orbit")....而不是选择$(document) 。 我以快速示例进行了尝试，事件触发得很好。

请参阅http://foundation.zurb.com/docs/components/orbit.html并搜索“ after-slide-change.fndtn.orbit”以查看我正在查看的示例。

更新资料

我设置了一个jsFiddle来演示此工作（您必须滚动到javascript面板的底部才能看到相关的内容）。 看来关键是用$(document).ready(function(){和});包围javascript }); ：

$(document).ready(function() {
    // this should come before initializing orbit or it won't fire
    $("#featured1").on('ready.fndtn.orbit', function(e) {
        console.log('orbit is ready');
    });

    $(document).foundation({
       orbit: {
            animation: 'fade',
            timer: false,
            slide_number: false,
            pause_on_hover: false,
            animation_speed: 800,
            navigation_arrows: true,
            bullets: false
        }
    });

    $("#featured1").on('after-slide-change.fndtn.orbit', function(e) {
        console.log('getting after slide change event!');
    });
});

请注意，我必须将调用添加到$(document).foundation并且必须将计时器设置为true，因为我看不到导航箭头来手动更改幻灯片。 最后，我没有您的图像，所以很难看，但是我认为它演示了如何使事情足够好；）

无论如何，当您访问该链接时，请打开浏览器的JavaScript控制台以查看输出“幻灯片更改事件后获取！”。