最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Can't initialize orbit on Foundation 5 - Stack Overflow

programmeradmin1浏览0评论

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 (.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!

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./docs/ponents/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!

Share Improve this question edited Dec 19, 2013 at 23:56 strivedi183 4,8313 gold badges32 silver badges40 bronze badges asked Dec 19, 2013 at 16:15 viriatoviriato 8692 gold badges13 silver badges26 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 5

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. 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./1200/1200" alt="slide 1">
                <div class="orbit-caption">
                    Caption 1
                </div>
            </li>
            <li>
                <img src="http://lorempixel./1200/800" alt="slide 2">
                <div class="orbit-caption">
                    Caption 2
                </div>
            </li>
            <li>
                <img src="http://lorempixel./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.

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

"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>

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.

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

发布评论

评论列表(0)

  1. 暂无评论