Menu icon Foundation
Orbit slider only stacks and doesn't slide

I've read the documentation, re-read it and watched Youtube videos. No matter what I try, the Orbit slider does not work. Before I write an obit for Orbit, here's my code:

            
<!-- Orbit Slider -->
    
    <div class="row">
      <div class="small-12 columns" style="width:100%; margin-left:auto; margin-right:auto;"> 
         
        <ul data-orbit>
           <li>
             <img src="img/pbg-Accounting2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Auditing2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Compilations2.jpg" />
           </li>
          <li>
             <img src="img/pbg-Consulting2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Review2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Tax2.jpg" />
           </li>
        </ul>
        
      </div>   <!-- end small-12 columns -->
    </div>  <!-- end row -->


    <script src="js/vendor/modernizr.js"></script>   <!-- I had this in script in the head, but saw a tutorial where it was at the bottom with the other scripts -->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    
    <script>
      $(document).foundation({
          orbit: {
          animation: 'slide',
          timer_speed: 1000,
          pause_on_hover: true,
          animation_speed: 500,
          navigation_arrows: true,
          bullets: false
        }
      });
    </script>




         

Orbit

I've read the documentation, re-read it and watched Youtube videos. No matter what I try, the Orbit slider does not work. Before I write an obit for Orbit, here's my code:

            
<!-- Orbit Slider -->
    
    <div class="row">
      <div class="small-12 columns" style="width:100%; margin-left:auto; margin-right:auto;"> 
         
        <ul data-orbit>
           <li>
             <img src="img/pbg-Accounting2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Auditing2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Compilations2.jpg" />
           </li>
          <li>
             <img src="img/pbg-Consulting2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Review2.jpg" />
           </li>
           <li>
             <img src="img/pbg-Tax2.jpg" />
           </li>
        </ul>
        
      </div>   <!-- end small-12 columns -->
    </div>  <!-- end row -->


    <script src="js/vendor/modernizr.js"></script>   <!-- I had this in script in the head, but saw a tutorial where it was at the bottom with the other scripts -->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    
    <script>
      $(document).foundation({
          orbit: {
          animation: 'slide',
          timer_speed: 1000,
          pause_on_hover: true,
          animation_speed: 500,
          navigation_arrows: true,
          bullets: false
        }
      });
    </script>




         

This post has been closed. No new replies can be added.

Rafi Benkual almost 4 years ago

It sounds like the JS isn't initialized properly. If this is the complete page snippet, you need to initialize foundation JavaScript like this.

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

Also, modernizr should be in the head because some of the rendering that happens on the page rely on it.

Steve Juliusson almost 4 years ago

Thank you for responding to my post; I appreciate your quick response.

It's not the complete code for the entire page, if that's what you mean by "snippet".
if you'd like to see that, I'd be happy to copy all of it to show you.
Just let me know...

I originally had the modernizr code in the head; I put it back there.
I also had the " $(document).foundation ( ); ..." code as you had, that was it before I added the orbit attributes.
I was following the documentation.

However, when I change the code to the way you have it, the orbit slider still stacks...

Rafi Benkual almost 4 years ago

Sorry didn't see the initialization but you did include it.

I pulled the code into a codepen demo and it works fine there: http://codepen.io/rafibomb/pen/KdXJEL

It seems like the JS on your page is not working.

I would check the file paths to make sure they're right. Also check the console for errors.

Steve Juliusson almost 4 years ago

Dear Rafi,

I checked the console and no errors.

However, I downloaded a Woothemes Flexslider and it worked right away.

So given that, what do you think is wrong with the Orbit slider since there were errors?

Thanks,
Steve