Foundation 6 Orbit: Change Slide programatically

Question

On Foundation 6.

I have an orbit slider that, besides the default behaviour, it also needs to be able to change the slide when an outside button is clicked.

Is there a way to make this work?

I've tried this code:

jQuery('#theslider').foundation('changeSlide', true, slide_id); 

//slide_id is the jQuery object's slide ex: jQuery(#slideid);

It kind of works, but it works erratically.

It sometimes works fine for a while, but a some point then the slide goes fast and disappears from the screen, or simply freezes.

I can't seem to find a pattern on what's going on.

I'm not an expert on javascript so I might be missing something really obvious.

Answer 1

My solution as follow:

$('.orbit-external-control').on('click', function () {
  var activeIdx = ~~$('.orbit .orbit-bullets .is-active').data('slide')
  var changeIdx = ~~$(this).data('slide')
  var isLTR = (changeIdx > activeIdx) ? true : false

  if (activeIdx ===  changeIdx)
    return

  var chosenSlide = $('.orbit .orbit-slide').filter(function (index) {
    return index === changeIdx
  })

  $('.orbit').foundation('changeSlide', isLTR, chosenSlide, changeIdx) 
})