0

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

tomet
  • 2,416
  • 6
  • 30
  • 45
  • 1
    Have you got the instantiation code inside anything? If not it will run as soon as the client loads your app and before any templates have rendered and therefore there wont be a owl-carousel class. It should be inside a Template.featuredCarousel.rendered = function() { ... } which will run after that template has been rendered – shambles Aug 15 '14 at 21:41
  • Thank you for your comment, that was the problem and now it's working. If you post this comment as an answer, I can accept it. – tomet Aug 15 '14 at 21:53

1 Answers1

3

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

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