How to customize orbit-caption animation

Question

I'm using Foundation 5 as my framework. I'm having a problem with changing the default animation and speed of the orbit-caption.

Is there anyone who knows how to change the animation from slide to fade for the captions? and if there is, is it possible to do it using the attribute data-options?

I saw from the documentation that there are different ways to customize orbit slider but can't find anything about the caption. I also tried looking for similar problems here in stackoverflow but can't find the same one as me. Hopefully you guys can help me. Thanks in advance

Answer 1

I manage to do it somehow by adding an event listener

Here is how I did it:

$(".orbit-next, .orbit-prev").click(function() {
      $('.orbit-caption').fadeOut(100);
      $('.orbit-caption').fadeIn(1500);
});

or I can also use events provided from the documentation

$("#banner").on("before-slide-change.fndtn.orbit", function(event) {
    $('.orbit-caption').fadeOut(100);
});
$("#banner").on("after-slide-change.fndtn.orbit", function(event, orbit) {
    $('.orbit-caption').fadeIn(1500);
});

If any of you have a better suggestion on how to do this properly, please do so. I'd be really happy to learn something new :)