Foundation 6 Orbit：禁用自动播放

Question

我希望创建一个不会自动播放的轨道，并且仅在用户手动单击“下一步”链接时才更改幻灯片。

文档： https://foundation.zurb.com/sites/docs/orbit.html

我是否以错误的方式使用数据选项？

<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

干杯！

Answer 1

这就是我让它工作的方式：

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

Answer 2

正如Foundation docs 中提到的，有两种方法可以在 HTML 中定义设置：

1. 作为单个数据属性，就像 Åsmund 在他的回答中所做的那样

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

2. 或一起在data-options属性中，即像这样

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

在前一种情况下，选项用连字符表示，而在第二种情况下，选项用驼峰式表示。