Telescope Owl 轮播

Question

我正在尝试将 owl-carousel 与 Telescope 一起使用，但我无法使其正常工作。我目前没有动态数据。以下是我遵循的步骤。

创建一个 Telescope 包。
添加了蔡司主题。
添加owl-carousel package

然后在用户个人资料上，telescope 应用程序以表格格式显示用户喜欢的帖子列表，我想将其显示为带有图像的轮播。（请注意，这是最终目标，目前我只是想让基本的 owl-carousel 功能发挥作用）

以下是我采取的步骤。

在 User_profile 模板上我添加了一个新模板 carousel

<template name="carousel">
    <div class="user-profile-votes grid grid-module">
        <div id="owl-carousel">
        <div class="item"><h1>1</h1></div>
        <div class="item"><h1>2</h1></div>
        <div class="item"><h1>3</h1></div>
        <div class="item"><h1>4</h1></div>
        <div class="item"><h1>5</h1></div>
        <div class="item"><h1>6</h1></div>
        <div class="item"><h1>7</h1></div>
        <div class="item"><h1>8</h1></div>
        <div class="item"><h1>9</h1></div>
        <div class="item"><h1>10</h1></div>
        <div class="item"><h1>11</h1></div>
        <div class="item"><h1>12</h1></div>
        <div class="item"><h1>13</h1></div>
        <div class="item"><h1>14</h1></div>
        <div class="item"><h1>15</h1></div>
        <div class="item"><h1>16</h1></div>
      </div>
  </div>
  <div class="customNavigation">
      <a class="btn prev">Previous</a>
      <a class="btn next">Next</a>
    </div>
</template>

完成后，我添加了支持模板的js文件如下。

Template.carousel.rendered = function() {
  Meteor.setTimeout(function() {
    var owl = $('#owl-carousel');
    owl.owlCarousel({
      navigation : true,
      loop: true,
      autoplay: 1000,
      items : 10, //10 items above 1000px browser width
      itemsDesktop : [1000,5], //5 items between 1000px and 901px
      itemsDesktopSmall : [900,3], // betweem 900px and 601px
      itemsTablet: [600,2], //2 items between 600 and 0
      itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
      mouseDrag: true,
      touchDrag: true,
      afterInit : function(elem){
          var that = this
          that.owlControls.prependTo(elem)
        }
    });
  }, 0)
}

旋转木马有了这个功能，向我展示了 10 个不同的元素，如您在下面的视频中所见。即使是自动播放也可以，但按钮或圆点不起作用。我尝试了无数的东西并参考了许多文章更改超时，添加自动运行等。但是，这是一个静态列表。

不确定为什么它不起作用，任何帮助都会很棒。

https://youtu.be/Ljoxw561Eic

Answer 1

这个 owl-carousel 包正在使用 Owl Carousel 2

atmospherejs.com中的link是错误的，那是旧版本。选项和事件与此版本不同。

Telescope Owl 轮播

Telescope Owl Carousel

meteor

telescope

owl-carousel-2