CODEWITHSUNDEEP
swiper.js
Devlesch
Devlesch

Reputation: 204

first load of mySwiper do not display spaces, and after resizing it works fine

I use MeteorJs and nolimits4web:swiper

The first load of the page do not display margins and do not place slides correctly, but if a go to another page and come back or if I resize the page everything is working perfectly.

-> If a reload the page, it breaks it again.

The slider seems to init before loading my data or something like that but even waiting on the subscription does not seem to solve anything.

Any idea ?

Template.search.onRendered(function() {
  var mySwiper = new Swiper ('.swiper-container', {
    loop: false,
    spaceBetween: 30,
    slidesOffsetBefore: 20,
    slidesPerView: 'auto',
    grabCursor: true,
    slidesOffsetAfter: 30,
  });
});

enter image description here

enter image description here

Upvotes: 0

Views: 1191

Answers (1)

Devlesch
Devlesch

Reputation: 204

Adding: observer: true and observeParents: true solved the issue.

Upvotes: 2

Related Questions