将 Orbit Slider 与 Reverie WordPress 框架一起使用

Question

我正在尝试将Orbit Slider 与Reverie WordPress Framework 一起使用。

我使用了 Orbit 文档中提供的基本格式来设置 Orbit Slider：

<ul class="example-orbit" data-orbit>
  <li>
    <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li class="active">
    <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

但是，我似乎无法让它工作。

我使用了以下脚本：

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'foundation-js' );
    wp_enqueue_script( 'fastclick-js' );
    wp_enqueue_script( 'masonry-js' );
    wp_enqueue_script( 'html5shiv' );

并从页脚中调用了愚蠢：

    <script>
        (function($) {
            $(document).foundation();
        })(jQuery);
    </script>

我是否也需要像这样从页脚调用 Orbit Slider：

    $(document).foundation('orbit', 'reflow');

我也做过，但是没用。

另外，我使用的是 WordPress 提供的默认 Jquery，但这也不起作用，所以我使用 jquery version 2.1.0。

我用过foundation.min.js。所以，我认为我不需要再打电话给orbit.foundation.js。对不对？

另外，当我点击下一个箭头或上一个箭头时，会出现第一张图片并开始自动播放，但图片从不滑动。我已经看到使用 Chrome 的检查元素，Orbit 的 html 被正确呈现，并且 CSS 和 JS 文件都被调用或不被调用。他们都很好。滑块与所有控件一起正确显示，但图像不滑动。

我在这里遗漏了什么吗？请帮忙。

注意

也尝试过其他滑块（Owl Carousel Slider）。似乎没有一个按预期工作。

Answer 1

我通过使用foundation.js 而不是foundation.min.js 来修复它，然后包含foundation.orbit.js。也许有一些错误是由foundation.min.js引起的。