My foundation orbit image slider is working in Codepen but not in 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