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.

The slider has it's own timer to slide to the next slider-image. When you implement this function, it works but when the time is up, it changes to the next slide. So try to control the timer also with the function you have written. Also, try to share your code through jsfiddle. — Hari Harker

ZongYan You ZongYan You · Accepted Answer · 2017-07-19T06:54:59

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) 
})

Foundation 6 Orbit: Change Slide programatically

1 Answers