javascript - 如何在 Foundation 4 Orbit 中捕获滑块事件？

Question

我希望我的页面在滑块中的每张幻灯片上更改一些元素。我设法在桌面版本中通过将函数附加到点击事件来做到这一点，如下所示：

$(".orbit-next").on("click", nextChange);
$(".orbit-prev").on("click", prevChange);

但这在触摸幻灯片版本中不起作用:(有谁知道如何实现这一点？我找不到与触摸幻灯片相关的任何事件，也没有任何要调用的函数。

Answer 1

查看“foundation.orbit.js”，您可以看到它使用的事件。

'orbit:after-slide-change.fndtn.orbit'
'orbit:next-slide.fndtn.orbit click.fndtn.orbit'
'orbit:prev-slide.fndtn.orbit click.fndtn.orbit'
'orbit:toggle-play-pause.fndtn.orbit click.fndtn.orbit touchstart.fndtn.orbit' 
'touchstart.fndtn.orbit'
'touchmove.fndtn.orbit'
'touchend.fndtn.orbit'

您可以在轨道使用的元素上使用 jQuery绑定来收听这些。

$("[data-orbit]").bind('orbit:after-slide-change.fndtn.orbit', function(event){
      console.log('slide change', event);
      //alert('slide change', event);

      //do clever stuff
    });

'after-slide-change.fndtn.orbit' 可能是最有用的，因为它应该在所有设备上触发。（我在 Chrome 和 iPad 上对此进行了测试）。

希望这可以帮助。