猫头鹰轮播未显示

问题描述

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

I'm trying to use OwlCarousel version 2.0 together with Bootstrap 3 and Meteor.

我像这样为轮播创建模板:

I create a template for the carousel like this:

<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文件中:

I include this in my index.html file:

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

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

Finally, I have a separate .js-file for instantiating the carousel:

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

此代码大部分是从文档中复制的.因此，我希望它能起作用.但是，它什么也不显示.轮播似乎是这里的问题，因为当我从div中删除.owl-carousel类时，将显示元素(尽管当然不在轮播中).

This code is largely copied from the documentation. Therefore, I would expect it to work. However, it simply displays nothing. The carousel seems to be the problem here, because when I remove the .owl-carousel class from the div, the elements are displayed (though not in a carousel of course).

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

Can anyone tell me why this is not working and how to get it working? I would really appreciate your help.

谢谢

托尼

推荐答案

您需要将实例化代码放入渲染的回调中:

You need to put the instantiation code inside a rendered callback:

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

这篇关于猫头鹰轮播未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！