猫头鹰轮播不显示

Question

我正在尝试将 OwlCarousel 2.0 版与 Bootstrap 3 和 Meteor 一起使用。

我像这样为轮播创建一个模板：

<template name="featuredCarousel">
<div class = "row">
    <div class="owl-carousel">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
    </div>
</div>
</template>

我将它包含在我的 index.html 文件中：

<div class="container">
    {{> featuredCarousel}}
</div>

最后，我有一个单独的 .js 文件用于实例化轮播：

$('.owl-carousel').owlCarousel({
loop:true
});

这段代码大部分是从文档中复制而来的。因此，我希望它能够工作。但是，它什么也不显示。轮播似乎是这里的问题，因为当我从 div 中删除 .owl-carousel 类时，会显示元素（当然不是在轮播中）。

谁能告诉我为什么这不起作用以及如何使它起作用？非常感谢您的帮助。

谢谢，

托尼

Answer 1

您需要将实例化代码放在呈现的回调中：

Template.featuredCarousel.rendered = function() {
  $('.owl-carousel').owlCarousel({
   loop:true
  });
}