javascripthtmlzurb-foundationorbit

Images dont slide in orbit slider Foundation

I'm trying to add Foundation Orbit Slider to my web page. It looks easy and I've got to see the images and the prev & next buttons, but if I click on prev and next buttons the orbit slider doesn't move at all. The images doesn't slide and I don't know why, beacuse I've seen many examples and I think my code looks the same. Any help woud be appreciated

<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="altiria webapp">

    <link rel="stylesheet" href="assets/css/foundation.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.structure.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.theme.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/modernizr.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/jquery-ui.js"></script>
    <script src="assets/js/foundation.min.js"></script> 

 </head>

 <body>
   <div class="orbit-container">
     <ul class="example-orbit" data-orbit>
       <li>
         <img src="assets/images/paisaje1.jpg" alt="slide 1" />
         <div class="orbit-caption">
           Caption One.
         </div>
      </li>
      <li class="active">
        <img src="assets/images/paisaje2.jpg" alt="slide 2" />
        <div class="orbit-caption">
          Caption Two.
        </div>
      </li>
      <li>
        <img src="assets/images/paisaje3.jpg" alt="slide 3" />
        <div class="orbit-caption">
          Caption Three.
        </div>
      </li>
    </ul>

    <!-- Navigation Arrows -->
    <a href="#" class="orbit-prev">Prev <span></span></a>
    <a href="#" class="orbit-next">Next <span></span></a>

    <!-- Slide Numbers -->
    <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
    </div>

    <!-- Timer and Play/Pause Button -->
    <div class="orbit-timer">
      <span></span>
      <div class="orbit-progress"></div>
   </div>
 </div>
 <!-- Bullets -->
 <ol class="orbit-bullets">
   <li data-orbit-slide-number="1"></li>
   <li data-orbit-slide-number="2" class="active"></li>
   <li data-orbit-slide-number="3"></li>
 </ol>

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

</body>

enter image description here

Solution

  • It looks like you have a mix of the pre-rendered HTML and rendered HTML on your page. You don't need the chunks of code labeled with comments (navigation arrows, slide numbers, timer, bullets, etc); Foundation will render them for you.

    In addition, it's possible that your class="example-orbit" is interfering and, unless you need it, I'd suggest removing it.

    Important to note: According to the Foundation website, "Orbit has been deprecated, meaning that it is no longer supported." They officially recommend using a different image slider instead of their orbit.