CODEWITHSUNDEEP
meteorscrollswiper.js
codsimba
codsimba

Reputation: 67

Swiper with Meteor

I need swipe horizontally with dynamic data in meteor, but it still not simply working, any idea? My code:

<template name='gallery'>
  <div class="swiper-container" id="swiper-container1">
     <div class="swiper-wrapper">
      <div class="swiper-slide">
        {{#each gallery_images}}
          <div style="background-image:url(data:image/png;base64,{{base64encoded}})"></div>
        {{/each}}
      </div>
     </div>
  </div>
</template>

This is the helper function and swiper registration

Template.gallery.helpers({
      gallery_images: function(){
        return Images.find();
      }
    });
Meteor.startup(function(){

    console.log('Initial Swiper');
    var swiper = new Swiper('.swiper-container',{
        resistance : '100%',
        createPagination:false,
        loop: false
    });
    swiper.reInit();
});

Upvotes: 2

Views: 668

Answers (1)

Soren
Soren

Reputation: 14718

Instead of 

Meteor.startup(function(){...

Use;

Template.gallery.onRendered(function(){ ....

The DOM is not populated with all the div's at startup, that only happens after the template has been rendered with the data from {{#gallery_images}} and not until then can you new the Swiper class

Upvotes: 2

Related Questions