Orbit - Buttons instead of Bullets

[brandy000]

Hi!

I´m using Foundation 6.7.5 and I´m using Orbit.
AS in older versions, I want to control the Orbit via Buttons:
If you click on Button 1 you get Orbit Slide number 1 and so on!

It works with this contruction, but it doesn´t look right:
<nav class="orbit-bullets"> <button class="is-active" data-slide="0"> <span class="button">Slide 1</span </button> <button data-slide="1"><span class="button">Slide 2</span></button> <button data-slide="2"><span class="button">Slide 3</span></button> </nav>

Thanks a lot!

[clizlee]

How did you want it to look? It may be you just need to override some styles from the foundation stylesheet in your own custom stylesheet. Do you have like a codepen or somewhere we can see an example of what you're trying to do?

[brandy000]

Hi!

Thanks for your answer.
I mean I would be happy if i could make a button for orbit-slider 1 and another for orbit-slider 2.
Is there a Javascript to jump to different slides?

Thanks a lot!

[brandy000]

I saw that it worked like this in F5 - I will give this one a try:
https://get.foundation/sites/docs-v5/components/orbit.html

[clizlee]

Oh ok. I guess I don't see much of a difference though between using the bullets to jump to slides and using the buttons to jump to slides. But hope it works for you. Sorry I wasn't much help.

[brandy000]

Okay, i did it with bullets - the problem is, that they only work after the orbit.
I´m trying with Javascript now - maybe someone has solution with this one: $('#element').foundation('changeSlide', isLTR, chosenSlide, idx);

I only have and will have three orbits.

Thanks a lot!

[brandy000]

So here is my idea:

<script> $(document).ready(function() { $('#nav-button-1').on('click', function() { $('.orbit').foundation('changeSlide', true, chosenSlide, 1); }); $('#nav-button-2').on('click', function() { $('.orbit').foundation('changeSlide', true, chosenSlide, 2); }); $('#nav-button-3').on('click', function() { $('.orbit').foundation('changeSlide', true, chosenSlide, 3); }); }); </script>

It doesn´t work, as I don´t know, what the "chosenSlide" element is?
Thanks a lot!