如何在Foundation 4 Orbit中捕獲滑塊事件？

Question

我希望頁面在滑塊中的每張幻燈片上更改一些元素。 我設法通過將功能附加到click事件來在桌面版本中做到這一點，如下所示：

$(".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上對此進行了測試）。

希望這可以幫助。