Foundation-sites: Orbit slider stops after second slide is loaded in v6.6.1

Created on 14 Jan 2020  路  8Comments  路  Source: foundation/foundation-sites

What should happen?

After loading Orbit, the user should be able to navigate through the Slides back and forth.

What happens instead?

But that actually happens is that the slider stucks after clicking on the right arrow, the second slide loads but the whole control gets stuck after that and cannot go back or forward.

Steps to Reproduce

  1. download attached package.json and index.html
  2. npm install
  3. Load the Index.html file in Firefox or Chrome
  4. Click on the right arrow control of the orbit
  5. The orbit control get stuck and arrows won't work anymore!

Your Environment

  • Foundation version(s) used: v6.6.1
  • Browser(s) name and version(s): Latest Firefox and Chrome
  • Device, Operating System and version: Ubuntu 18.04
  • Project: See attached.

    package.json

{
  "name": "tstzurb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "foundation-sites": "^6.6.1",
    "jquery": "^3.4.1",
    "what-input": "^5.2.6"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
        <div class="orbit-wrapper">
          <div class="orbit-controls">
            <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
            <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
          </div>
          <ul class="orbit-container">
            <li class="is-active orbit-slide">
              <figure class="orbit-figure">
                <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
                <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
              </figure>
            </li>
            <li class="orbit-slide">
              <figure class="orbit-figure">
                <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">
                <figcaption class="orbit-caption">Lets Rocket!</figcaption>
              </figure>
            </li>
            <li class="orbit-slide">
              <figure class="orbit-figure">
                <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">
                <figcaption class="orbit-caption">Encapsulating</figcaption>
              </figure>
            </li>
            <li class="orbit-slide">
              <figure class="orbit-figure">
                <img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
                <figcaption class="orbit-caption">Outta This World</figcaption>
              </figure>
            </li>
          </ul>
        </div>
        <nav class="orbit-bullets">
          <button class="is-active" data-slide="0">
            <span class="show-for-sr">First slide details.</span>
            <span class="show-for-sr" data-slide-active-label>Current Slide</span>
          </button>
          <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
          <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
          <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
        </nav>
      </div>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/what-input/dist/what-input.min.js"></script>
    <script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>
picture haggag

Most helpful comment

Thanks @DanielRuf. I missed the part that says that motion-ui is required for Orbit to work properly. I ended up disabling motion via data-use-m-u-i="false", and it works now. Maybe it should be disabled by default as the functionality requires addition library? This will make orbit work out of the box, and only those who seeks the extra feature can following the steps to enable it.

Thanks again.

picture haggag on 16 Jan 2020
👍2

All 8 comments

See https://github.com/foundation/foundation-sites/pull/11944

This is a duplicate of the issues reported in our community. Closing because of this.

DanielRuf picture DanielRuf on 14 Jan 2020

@DanielRuf , Thanks for your reply. I have merged that PR and rebuilt the SCSS but still facing the same issue. How can I merge the batch today?

haggag picture haggag on 14 Jan 2020

and rebuilt the SCSS

It's JavaScript, see https://github.com/foundation/foundation-sites/pull/11944/files

DanielRuf picture DanielRuf on 14 Jan 2020

Hi Daniel,
Yes, I made the change in that JS file already. But the issue is still there (Orbit stucks after slide #2). In order to benefit from that change, should I explicitly import that JS file somewhere? I have even changed my package file to use 6.5.3 (ex. "foundation-sites": "6.5.3"), but I still have the issue in all browsers!
Am I using Orbit incorrectly ?! I just used the basic example from the docs!

haggag picture haggag on 15 Jan 2020

Did you also import motion-ui? Because this is required here.

DanielRuf picture DanielRuf on 15 Jan 2020
👍1

Can you provide a codepen where we can reproduce / see your issue?

DanielRuf picture DanielRuf on 15 Jan 2020

Thanks @DanielRuf. I missed the part that says that motion-ui is required for Orbit to work properly. I ended up disabling motion via data-use-m-u-i="false", and it works now. Maybe it should be disabled by default as the functionality requires addition library? This will make orbit work out of the box, and only those who seeks the extra feature can following the steps to enable it.

Thanks again.

haggag picture haggag on 16 Jan 2020
👍2

Currently this requirement is documented.

https://get.foundation/sites/docs/orbit.html#basics

Please note that apart from Javascript, Motion UI is a dependency for Orbit to work properly. If in case, you don't want any animations within your Carousel, you can always disable the animation.

Disabling it by default would be a breaking change.

DanielRuf picture DanielRuf on 16 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

johnbacon picture johnbacon  路  4Comments
coachie picture coachie  路  4Comments
foodgy picture foodgy  路  3Comments
g12n picture g12n  路  4Comments
johnbacon picture johnbacon  路  3Comments