Can't initialize orbit on Foundation 5

Question

I have been working the whole day long on this website made on Foundation 5. Everything went well until I decided to make an image slider by using Foundation's Orbit.

I already tried everything and nothing seems to be working. I checked their support page (http://foundation.zurb.com/docs/components/orbit.html) and tried every single option described there. Still not working...

Could anyone take a look at my code and tell me what am I doing wrong? Thanks!

<div class="row">
        <div class="large-9 columns logoone">
            <!-- slider --> 
            <ul class="orbit-container">
              <li> 
                <img src="images/1.JPG" alt="whatever" />
              </li>
              <li>
                <img src="images/2.jpg" alt="whatever" />
              </li>
              <li>
                <img src="images/3.JPG" alt="whatever" />
              </li>
            </ul>
            <!-- slider --> 
        </div>
        <div class="large-3 columns logoone">
            <img src="images/logo.jpg" alt="whatever" title="whatever">
            <br><br>
        </div>
      </div>

<script src="js/jquery.js"></script>
    <script src="js/foundation.min.js">
        $(document).foundation({
          orbit: {
            animation: 'slide',
            timer_speed: 1000,
            pause_on_hover: true,
            animation_speed: 500,
            navigation_arrows: true,
            bullets: false,
            next_on_click: true
          }
        });
    </script>

    <script src="js/foundation/foundation.orbit.js">    </script>

This is how the code is right now. As explained, I already tried to edit directly the orbit.js file, added the class orbit-container to a div instead, added

data-options="animation:slide;
                  animation_speed:1000;
                  pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                  next_on_click:true;"

at the ul, etc... nothing worked so far! I also tried to call the in the head and didn't work.

Can anyone please lighten my mind? Thanks in advance!

Answer 1

sorry for opening up an old post, but I was stuggling with the same problem, and solved it.

I've also used the shown code on foundation.zurb.com docs. It just doesn't work. It started working as soon as I removed the class attribute from the <ul> and using data-orbit.

After that, I noticed that in the example, they show html for the prev and next buttons, and for the bullets. You don't need that to place in your code. It's redundant and will interfere with the generated controls.

So, long story short, my slider ended up like this:

<div class="row">
    <div class="large-12">
        <ul data-orbit>
            <li>
                <img src="http://lorempixel.com/1200/1200" alt="slide 1">
                <div class="orbit-caption">
                    Caption 1
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800" alt="slide 2">
                <div class="orbit-caption">
                    Caption 2
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/800/1200" alt="slide 3">
                <div class="orbit-caption">
                    Caption 3
                </div>
            </li>
        </ul>
    </div>
</div>

So notice: NO class on your <ul>, that seems to be the solution. At least it was in my case.