我的基础轨道图像滑块在 Codepen 中工作，但在 Plunker 中无效

Question

My Orbit image slider is working as expected in 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>

and

$(document).foundation();

but the very same code is not working in Plunker .

So strange. Any help? Thanks.

Answer 1

You have not referenced your script.js in Plunkr.

In Codepen, the JS is added inline with the demo. But in Plunkr, you need to reference the JavaScript file in your HTML code or you can add inline within <script>$(document).foundation();</script> before </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 --> 

Updated Plunkr.co