Meteor with iron-router cant get slick carousel working

Question

I am using iron-router, i have a route \"models\" which has a list of items. When the user clicks one of these items a new route \"model\" is used, the name of the selected

Answer 1

Generally speaking, you should initialize plugins in a template's onRendered callback. In your case, that won't work because onRendered will fire before any of the images are inserted into the DOM. With other carousel plugins I've seen, the following strategy works:

1. Move each item to its own template (carouselItem).
2. Add an onRendered callback to carouselItem so that the plugin will be initialized after each item is added to the DOM.

I haven't tried this with slick carousel, but it would look something like this:

<template name="carousel">
  <div id="carousel">
    {{#each images}}
      {{> carouselItem}}
    {{/each}}
  </div>
</template>

<template name="carouselItem">
  <div class="item">
    <img src="/images/{{this}}">
  </div>
</template>

Template.carouselItem.onRendered(function() {
  $('#carousel').slick();
});

Assuming slick carousel can be initialized multiple times, this approach should work. Be aware that one possible downside is that the plugin will refresh whenever images is updated. One way to fix that is to use the {reactive: false} option in your find.

Answer 2

Usually you would call a plugin on an element in Template.myTemplate.onRendered:

Template.xxx.onRendered(function() {
  $('#carousel').slick();
});`