How to capture slider events in Foundation 4 Orbit?

Question

I want my page to change some elements with each slide in the slider. I managed to do this in the desktop version, by attaching functions to the click events, like this:

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

But that doesn't work in the touch slide version :( Does anyone know how to achieve this? I couldn't find any event related to the touch slide, neither any function to call.

Answer 1

Have a look in the 'foundation.orbit.js', you can see the events that it uses.

'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'

You can listen to these using jQuery bind on the element used by orbit.

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

      //do clever stuff
    });

The 'after-slide-change.fndtn.orbit' is probably most useful as this should fire on all devices. (I tested this in Chrome and on the iPad).

Hope this helps.