我的基础轨道图像滑块在 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