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.

Answer 2

You need to add a data-orbit attribute to your ul element.

Answer 3

"The only thing you need to do is add a <ul data-orbit></ul> element to your page."

It looks like you need to add "data-orbit" to the end of your ul class...

<ul class="example-orbit" data-orbit>

Answer 4

James' and Opentuned's answer should work (you shouldn't need to add classes like 'orbit-container' like you show in your example code).

This plunkr is a working example: http://plnkr.co/r8jfn1

I think the problem may stem from load order and location of your script links.

Answer 5

I was able to get it working by including modernizr.js in my head section.