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

Question

我想让我的页面随着滑块中的每一张幻灯片而改变一些元素。我设法在桌面版本中做到了这一点，通过将函数附加到单击事件，如下所示：

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

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

Answer 1

看看‘oundation.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'

您可以在orbit使用的元素上使用jQuery bind来收听这些内容。

$("[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上对此进行了测试)。

希望这能有所帮助。