Не удается заставить Orbit Carousel работать в Foundation 6.2.0

Я всю жизнь пытался заставить базовую карусель Orbit работать, но этого просто не происходит. Может ли кто-нибудь увидеть, где я ошибаюсь? Я пробовал различные альтернативы и просматривал документацию, но ничего не получаю:

Код ниже:

<!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>Orbit Test</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
  </head>
  <body>
    <div class="row">
      <div class="large-12 columns">
          <ul data-orbit>
            <li>
              <div>
                <p><strong>This is item 1.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </li>
            <li>
              <div>
                <p><strong>This is item 2.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </li>
            <li>
              <div>
                <p><strong>This is item 3.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </li>
            <li>
              <div>
                <p><strong>This is item 4.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
  </body>
</html>

person Jack of all Trades    schedule 10.03.2016    source источник
comment
Что, если скопировать и вставить пример с веб-сайта?   -  person Yass    schedule 13.03.2016
comment
На сайте нет реальных примеров. На самом деле большая часть документации по Foundation 6 не отображает реальную реализацию. Это прискорбно. foundation.zurb.com/sites/docs/orbit.html   -  person Chris O    schedule 01.04.2016


Ответы (1)


После импорта foundation.css css в <head> добавьте:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />

или используйте собственную загруженную копию таблицы стилей motion-ui.


Источник:

Я нашел тему на Github, в которой упоминается необходимость включения CSS Motion UI:

[F 6.0.4] Орбита работает неправильно #7264

В документе Foundation 6 Motion UI я нашел упоминание о том, что CSS Motion UI необходим для переходов в компонентах Orbit, Toggler и Reveal:

Документ по пользовательскому интерфейсу Foundation 6 Motion

И внизу в документе Motion UI есть ссылка на cdn:

Установка пользовательского интерфейса Foundation 6 Motion

person Chris O    schedule 01.04.2016
comment
О, какого черта, вам нужно включить еще один файл CSS, которого нет в библиотеке?! Все, что написано в документах, это то, что он поддерживает Motion UI, не говоря уже об этом, кстати, вам нужно установить это foundation.zurb.com/sites/docs/motion-ui.html#installing - person igneosaur; 06.05.2016
comment
Но даже это не все; Я включаю весь свой sass (включая библиотеки поставщиков) в свой файл main.scss. Просто включить файл motion-ui.scss недостаточно, вам также необходимо включить два основных миксина для загрузки всего CSS: @include motion-ui-transitions; @include motion-ui-animations; Надеюсь, это сэкономит кому-то еще время. github.com/zurb/motion-ui/blob/master/ документы/installation.md - person igneosaur; 06.05.2016