Meteor + Owl Carousel

help
1

Have you faced problems with Owl Carousel in Meteor, because I cannot setup a simple tutorial in Meteor framework?

.html

<template name="tournament">
    <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 class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
</div>
</template>

.js

Template.tournament.onRendered(function () {
    $.getScript('owl.carousel.min.js', function(){});
    $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});
});
2

I’ve never used owlCarousel, nor tried using getScript in Meteor, but given that it will work as expected, you’re not currently waiting for the script to load. You could try:

Template.tournament.onRendered(function() {
  $.getScript('owl.carousel.min.js').done(function() {
    $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
    });
  }).fail(function() {
    // do something here
  });
});
3

Damn it works :smile:

Thanks again @robfallows !

I wonder why getscript worked when I used it with tablesorter back days, but not with this one :smirk:

1 Like