我正在尝试将 owl-carousel 与Telescope一起使用，但我无法使其工作。我目前没有动态数据。以下是我遵循的步骤。
- 创建一个望远镜包。
- 添加了主题蔡司。
- 添加owl-carousel 包
然后在用户个人资料上，望远镜应用程序以表格格式显示用户喜欢的帖子列表，我想将其显示为带有图像的轮播。（请注意，这是最终目标，现在我只是想让基本的 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 个不同的元素，正如您在下面的视频中看到的那样。即使自动播放也可以，但是按钮或圆点却不行。我尝试了无数的事情，并提到了许多文章更改超时，添加自动运行等。但是，这是一个静态列表。
不知道为什么它不起作用，任何帮助都会很棒。