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 item is passed as a param and used to load data about that model from the database.

I want to use slick carousel, using an array of images returned from the database (based on the param).

<div id="carousel">
    {{#each images}}
    <div class="item">
        <img src="/images/{{this}}" alt="">
    </div>
    {{/each}}
</div>

Where should I call the slick init?

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.