SlideBox rendered by template

[neil-s]

I'd like to use a SlideBox where each slide is generated by a template.

The Ionic implementation of SlideBox needs $ionicSlideBoxDelegate.update() to be called in Template.images.rendered. However, since Meteoric seems to use Slick.js rather than Ionic's SlideBox, what is the appropriate function to call for Slick to handle the slides that have been added to the DOM by a live-updating collection? Without this function call, the first slide gets rendered correctly, occupying the full-width of the window, but Slick doesn't let you swipe to the next image. I tried looking at the Slick documentation, but couldn't find the right call.

In short, how can I get the following working:

{{#ionSlideBox}}
    {{#each scenesToShow}}
        {{>sceneslide}}
    {{/each}}
{{/ionSlideBox}}

<template name="sceneslide">
    {{#ionSlide}}
        <h1>Something here</h1>
    {{/ionSlide}}
</template>

I tried changing them all to regular divs rather than a SlideBox, and calling .slick() explicitly like in the last code sample on https://github.com/udondan/meteor-slick, but you still can't swipe between slides even though they're all present in DOM and the carousel div indicates that slick has been initialized.

[odesey]

Have you tried calling .unslick() then .slick() on the parent element of the list of objects as they are updated? Also what about the .slickAdd() method, have you tried that?

[neil-s]

Tried calling .unslick() and then .slick(). Tried using a regular div rather than a slidebox, and calling .slick() then .unslick() and then .slick().

What finally worked was simply using a regular div, and then hooking into the Meteor DOM insertion process as below:

 if (Meteor.isClient) {
     Template.browse.onRendered(function () {
         $('.carousel').slick({
            dots: false,
            arrows: false,
            infinite: false
        });

        this.find('.carousel')._uihooks = {
            insertElement: function (node, next) {
                $('.carousel').slick('slickAdd', $(node));
            }
        }
    });
}

[ninjasun]

hello, I have the same issue. Whit that code how do you can pass each slide to the template?