Disable orbit previous & next buttons

Hey guys,

Wondering if anyone has any ‘hacks’ for the Foundation Orbit slider “previous” and “next” buttons.

Some initial details:

  • total # of 4 slides
  • data-infinite-wrap=“false” which works perfect.

Now, I want the “Previous” button to not show on the first slide and the “Next” button to not show on the 4th/last slide. Any suggestions here?

I see tabindex is set to 0 for all of them, but wondering if I can set this tab index, then target the tabindex with no pointer-events as required.



See the JavaScript events: https://get.foundation/sites/docs/orbit.html#js-events

See the parameters passed to the events:

And work with these values in some way.
Here is one possible solution:

You might want to make it more flexible to cover first and last slide index - independent of the number of slides.

Something like this:

Thanks @DanielRuf tried adding in your 1st and 2nd solution but for some reason it wasn’t working for me (not too advanced in JS). Going to keep trying.

Screenshot Link

@DanielRuf oops, disregard… got it working… had CSS in the wrong place (lol!). Cheers and thanks again for this amazing solution.