Foundation 6 Orbit: disable auto-play

Question

I am looking to create a orbit that will not auto-play, and only change slide when user clicks "next" link manually.

Docs: https://foundation.zurb.com/sites/docs/orbit.html

Do I use data-options the wrong way?

<div class="orbit" role="region" data-orbit data-options="data-timer-delay:0; data-auto-play:false;">
  <ul class="orbit-container">

    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

        <li class="is-active orbit-slide">
            <img class="orbit-image" src="https://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
        </li>
        <li class="orbit-slide">
           <img class="orbit-image" src="https://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
        </li>

  </ul>
</div>

http://codepen.io/anon/pen/vyoRJz

Cheers!

Answer 1

This is how I got it to work:

<div class="orbit" role="region" data-orbit data-auto-play="false">

Answer 2

As mentioned in the Foundation docs, there are two ways the settings can be defined in the HTML:

1. As individual data attribute, like Åsmund did in his answer

   <div class="orbit" role="region" data-orbit data-auto-play="false">
   

2. Or together in the data-options attribute i.e. like this

   <div class="orbit" role="region" data-orbit data-options="autoPlay:false; timerDelay:1000; bullets:false">
   

In the former case the option is notated in hyphenated words whereas in the second case the option is notated camelCased.