Dynamically loaded with blaze

Hello, Im using MeteorJS and I load my slides with a {{#each }} template helper

        <div class="swiper-container">
            <div class="swiper-wrapper">

                {{#each epis}}
                               <div class="swiper-slide">       
                    <div class="epi">   
                                             ..content here...  
                    </div> 
                                 </div>
                {{/each}}
            </div>
            <div class="swiper-pagination"></div>
        </div>

Im initializing swiper instance on onRendered callback

Template.episLista.rendered = function(){
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        slidesPerColumn: 2,
        paginationClickable: true,
        spaceBetween: 10,
    });
}

The swiper isn’t loaded at all… I think that the problem is that the HTML Layout of Swiper can’t be dynamically generated… what do you think ?

[rafaelcorreiapoli]

Hi! I had to time to think and made it work with a different approach, using Observe Changes, here’s my code

Template.slider.onRendered(function(){
    slides = [];
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        slidesPerColumn: 2,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 0,            
    })      

    Epis.observer =  Epis.find().observeChanges({
        added: function(id){            
            var epi = Epis.findOne({_id:id});
            swiper.appendSlide('<div class="swiper-slide" id="'+id+'"></div>');
            Blaze.renderWithData(Template.epiItem, {epiId:id}, document.getElementById(id))

            var obj = {
                id: id,
                slide: swiper.slides.length-1
            }
            console.log("adicionando no slide: " + parseInt(swiper.slides.length-1));
            slides.push(obj);
        },
        removed: function(id){
            console.log(_);
            var idx = -1;
            var currentSlide = _.find(slides,function(s){
                idx = idx + 1;
                return s.id==id;
            });
            swiper.removeSlide(currentSlide.slide);
            for (i=idx;i<slides.length;i++){
                slides[i].slide = slides[i].slide - 1
            }
            slides.splice(idx,1);

        },changed:function(id){

            //var epi = Epis.findOne({_id:id});
            //$("#"+id).html('');
            //Blaze.renderWithData(Template.epiItem, {epi:epi}, document.getElementById(id))
        }
    });
});

[nolimits4web]

You can generate Swiper content dynamically, you just need to init it when it is available in DOM