Telescope Owl Carousel

Question

I am trying to use owl-carousel with Telescope but i am not able to make it to work. I have no dynamic data at this point. Below are the steps I followed.

1. Create a Telescope package.
2. Added Theme Zeiss.
3. Add the owl-carousel package

Then on the user Profile, where the telescope app shows the list of Posts the user has liked in a tabular format, i want to display it as a carousel with the images. (Please note this is the end goal, for now i am just trying to get the basic owl-carousel functionality work)

Below are the steps i took.

On the User_profile template i added a new template carousel

<template name="carousel">
    <div class="user-profile-votes grid grid-module">
        <div id="owl-carousel">
        <div class="item"><h1>1</h1></div>
        <div class="item"><h1>2</h1></div>
        <div class="item"><h1>3</h1></div>
        <div class="item"><h1>4</h1></div>
        <div class="item"><h1>5</h1></div>
        <div class="item"><h1>6</h1></div>
        <div class="item"><h1>7</h1></div>
        <div class="item"><h1>8</h1></div>
        <div class="item"><h1>9</h1></div>
        <div class="item"><h1>10</h1></div>
        <div class="item"><h1>11</h1></div>
        <div class="item"><h1>12</h1></div>
        <div class="item"><h1>13</h1></div>
        <div class="item"><h1>14</h1></div>
        <div class="item"><h1>15</h1></div>
        <div class="item"><h1>16</h1></div>
      </div>
  </div>
  <div class="customNavigation">
      <a class="btn prev">Previous</a>
      <a class="btn next">Next</a>
    </div>
</template>

After that is done, i added the js file supporting the template as below.

Template.carousel.rendered = function() {
  Meteor.setTimeout(function() {
    var owl = $('#owl-carousel');
    owl.owlCarousel({
      navigation : true,
      loop: true,
      autoplay: 1000,
      items : 10, //10 items above 1000px browser width
      itemsDesktop : [1000,5], //5 items between 1000px and 901px
      itemsDesktopSmall : [900,3], // betweem 900px and 601px
      itemsTablet: [600,2], //2 items between 600 and 0
      itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
      mouseDrag: true,
      touchDrag: true,
      afterInit : function(elem){
          var that = this
          that.owlControls.prependTo(elem)
        }
    });
  }, 0)
}

With this the carousel works, shows me 10 different elements, as you can see in the below video. Even the Autoplay works, the however the buttons or dots don't. I tried zillions of things and referred many articles changed timeout, added autorun, etc. However, this is a static list.

Not sure why it's not working, any help will be great.

https://youtu.be/Ljoxw561Eic

Answer 1

This owl-carousel package is using Owl Carousel 2

The link in the atmospherejs.com is wrong , that is old version. The Options & Events are different from this version.