Meteor with an iron router cannot work with a heel

Question

I use an iron router, I have a “model” route that has a list of items. When the user clicks on one of these elements, a new “model” route is used, the name of the selected element is passed as a parameter and used to load data about this model from the database.

I want to use a smooth carousel using an array of images returned from the database (based on the parameter).

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

Where can I call slick init?

Answer 1

Generally speaking, you should initialize the plugins in the onRendered callback . In your case, this will not work, because onRendered will fire before any image is inserted into the DOM. The following strategy works with the other carousel plugins I've seen:

• Move each item to its own template ( carouselItem ).
• Add the onRendered to carouselItem so that the plugin is initialized after each element is added to the DOM.

I have not tried this with a smooth 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 that the spotted carousel can be initialized several times, this approach should work. Keep in mind that one of the possible disadvantages is that the plugin will be updated when the images updated. One way to fix this is to use the {reactive: false} parameter in find .

Answer 2

Usually you call the plugin for an element in Template.myTemplate.onRendered :

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