猫头鹰轮播未显示

Question

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>

I include this in my index.html file:

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

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

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

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.

Thanks,

Tony

Answer 1

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

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