Menu icon Foundation
Orbit slider not working correctly

So whenever i add the preview orbit slider (see code) to my site, all i see are 3 bullets. Any slider i add doesn't work. It just bugs out like there is no CSS for it. I added everything correctly i believe.
Same for the Canvas, when i add it it's like 20 PX heigth. And when i add content to it, it goes out of the canvas like i write it underneath it.
See code for more for the orbit.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="./css/foundation.css" />
    <script src="./js/modernizr.js"></script>
  </head>
  <body>
    <script src="./js/jquery.js"></script>
    <script src="./js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    
<div class="orbit-container">
  <ul data-orbit class="example-orbit orbit-slides-container">
    <li>
      <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
      <div class="orbit-caption">
        Caption One.
      </div>
    </li>
    <li class="active">
      <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
      <div class="orbit-caption">
        Caption Two.
      </div>
    </li>
    <li>
      <img src="http://placehold.it/1000x300/FDC43D/fff" 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>
</body>
</html>

orbit slidererror

So whenever i add the preview orbit slider (see code) to my site, all i see are 3 bullets. Any slider i add doesn't work. It just bugs out like there is no CSS for it. I added everything correctly i believe.
Same for the Canvas, when i add it it's like 20 PX heigth. And when i add content to it, it goes out of the canvas like i write it underneath it.
See code for more for the orbit.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="./css/foundation.css" />
    <script src="./js/modernizr.js"></script>
  </head>
  <body>
    <script src="./js/jquery.js"></script>
    <script src="./js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    
<div class="orbit-container">
  <ul data-orbit class="example-orbit orbit-slides-container">
    <li>
      <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
      <div class="orbit-caption">
        Caption One.
      </div>
    </li>
    <li class="active">
      <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
      <div class="orbit-caption">
        Caption Two.
      </div>
    </li>
    <li>
      <img src="http://placehold.it/1000x300/FDC43D/fff" 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>
</body>
</html>
Armin Boß almost 6 years ago

You need to move the following lines to the end of the body:

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

Miko almost 6 years ago

Make sure to call the Orbit JS in your page.

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

Aziz almost 6 years ago

Already done guys, nothing worked :/

Armin Boß almost 6 years ago

I'm sorry i didn't read the full code.
You shouldn't use the "rendered HTML" part of the docs but instead the example Markup. The Orbit HTML you used will be generated by the orbit javascript. Try it like this:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="./css/foundation.css" />
    <script src="./js/modernizr.js"></script>
  </head>
  <body>
    <ul class="example-orbit" data-orbit>
      <li>
        <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
        <div class="orbit-caption"> Caption One. </div> 
      </li> 
      <li>
        <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" /> 
        <div class="orbit-caption"> Caption Two. </div> 
      </li>
      <li> 
        <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" /> 
        <div class="orbit-caption"> Caption Three. </div> 
      </li>
    </ul>

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

Also make sure all javascript files and the foundation.css are loaded correctly as orbit won't work if one of them is missing.

You do not need to include foundation.orbit.js if you already included the full foundation.js. Orbit is included in foundation.js.

Paula Mourad almost 4 years ago

Hey guys, I'm having the same problem, everything is in the correct folder, correct code (not rendered html), css, etc, and what I get is one image below the other.

Any ideas?
Thanks!

Paula

Terence Flowers almost 4 years ago

I haven't been able to get this working yet either

Bastiaan Dewaele almost 4 years ago

I got it working by copying all css lines from this file.

view-source:http://foundation.zurb.com/sites/docs/assets/css/docs.css

Clearly the default foundation download is missing certain lines of code : /

Knight Yoshi almost 4 years ago

@Paula Mourad
@Terence Flowers
@Bastiaan Dewaele

Orbit works just fine. You need to add the Motion UI CSS, either the pre-compiled version or include the SCSS version in your CSS. You will need to install the Motion UI library into your project as it's not included by default except for the Foundation starter pojects.

npm install motion-ui --save-dev 

or

bower install motion-ui --save-dev

Then

@import 'motion-ui';
@include motion-ui-transitions;

Chris Olyer also said on Github, https://github.com/zurb/foundation-sites/issues/7286#event-479615131, that you can set it to not use the MUI library by adding data-use-m-u-i="false"

Paula Mourad almost 4 years ago

Thanks @Knight Yoshi !

I'm not a developer per se, so what you wrote is chinese for me! :)))
Can you explain to me in simpler language?

Thanks!