Vuejs 2模板中的基础轨道

Question

我在vue.js 2单个文件组件中使用基础轨道。我得到它显示但它只用于两张幻灯片，但我有四张。当我加载页面时，它会自动滑动到第二张幻灯片并停止，当我使用按钮时，它不会滑到任何其他幻灯片甚至是之前的页面。如果我重新加载页面并且我滑到另一张幻灯片，让我们说最后一张幻灯片，它会停留在那里并拒绝向后滑动。

这是我的代码：

<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>
    <ul class="orbit-container" style="height: 500px">
        <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="contemporary-image orbit-image" src="http://i.imgur.com/ZfFAkWZ.jpg" alt="Space">
  </li>
  <li class="orbit-slide">
    <img class="contemporary-image orbit-image" src="http://i.imgur.com/ZfFAkWZ.jpg" alt="Space">
  </li>
  <li class="orbit-slide">
    <img class="contemporary-image orbit-image" src="http://i.imgur.com/ZfFAkWZ.jpg" alt="Space">
  </li>
  <li class="orbit-slide">
    <img class="contemporary-image orbit-image" src="http://i.imgur.com/ZfFAkWZ.jpg" alt="Space">
  </li>
    </ul>
    <nav class="orbit-bullets">
        <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span
                class="show-for-sr">Current Slide</span></button>
        <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
        <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
        <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
    </nav>
</div>

以下是Jsfiddle

当我在浏览器中检查代码时，已显示的图像具有其他类别的其他类：

更新 我意识到罪魁祸首是添加到滑块的额外mui类。我无法弄清楚是什么在添加它们。