我的基礎軌道圖像滑塊在 Codepen 中工作，但在 Plunker 中無效

Question

我的軌道圖像滑塊在Codepen.io 中按預期工作，

<ul class="slider" data-orbit>
  <li>
    <img src="http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg" alt="" />
    <div class="orbit-caption">insert the image caption here</div>
  </li>
  <li>
    <img src="http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg" alt="" />
    <div class="orbit-caption">insert the image caption here</div>
  </li>
  <li>
    <img src="http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg" alt="" />
    <div class="orbit-caption">insert the image caption here</div>
  </li>
</ul>

和

$(document).foundation();

但同樣的代碼在Plunker中不起作用。

這么奇怪。 有什么幫助嗎？ 謝謝。

Answer 1

您尚未在 Plunkr 中引用您的script.js 。

在 Codepen 中，JS 被添加到演示中。 但是在 Plunkr 中，你需要在你的 HTML 代碼中引用 JavaScript 文件，或者你可以在<script>$(document).foundation();</script>之前的</body>添加內聯

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.orbit.min.js"></script>
<script src="script.js"></script> <!-- Add --> 

更新 Plunkr.co