CODEWITHSUNDEEP
javascriptjquerysliderzurb-foundationorbit
idejuan
idejuan

Reputation: 471

Cannot initialize javascript in Foundation 5 Orbit slider

I cannot initialize a Foundation orbit slider. Since my code was not working, I tried following strictly what the tutorial says. So I am following the tutorials in the Zurb Foundation website in order to build a basic slider:

http://foundation.zurb.com/docs/components/orbit.html

http://foundation.zurb.com/docs/javascript.html

And it is not initializing the slider. I cannot figure why after many attempts. The code I am using is the code below. If you want to test it, just uncompress the Foundation libraries and rename the folder to foundation.

When I load the page, there is no script error in the Chrome console.

Thanks for your help

<html> 
<head>
    <script type="text/javascript" src="foundation/js/vendor/modernizr.js"></script>

</head>
<body> 


  <script src="foundation/js/vendor/jquery.js"></script>
  <script src="foundation/js/vendor/fastclick.js"></script>  
  <script src="foundation/js/foundation.min.js"></script>

  <ul data-orbit>
    <li>
      <img src="http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
      <div class="orbit-caption">
        Caption One.
      </div>
    </li>
    <li class="active">
      <img src="http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
      <div class="orbit-caption">
        Caption Two.
      </div>
    </li>
    <li>
      <img src="http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg" alt="slide 3" />
      <div class="orbit-caption">
        Caption Three.
      </div>
    </li>
  </ul>


  <script>
    $(document).foundation();
  </script>

  </body> 
</html>

Upvotes: 0

Views: 551

Answers (1)

Crystal
Crystal

Reputation: 6160

I think you probably forgot to add the style sheets. 

<link rel="stylesheet" href="./foundation/css/normalize.css">
<link rel="stylesheet" href="./foundation/css/foundation.css">

Also if the foundation foundation folder is in the same folder as your html document then the path should probably be ./foundation :

<script type="text/javascript" src="./foundation/js/vendor/modernizr.js"></script>

Upvotes: 1

Related Questions