[SOLVED] Swiper breaks after 2 openings

Hi, I have a problem that I can’t solve.

Here is my template :

When you click on the first card “Soprano Announces …”, it opens the single.html page and the JS create a new Swiper (scroll down to Related Posts).

When you click on the first Slide of this Swiper “Edmond at the Royal …” it opens the single2.html page and the JS create an other instance of the slider.

So far all this is working. But on single2.html, when you click on the first slide, it opens single.html again, and now the Related Posts Swiper is broken.

Here is my JS code :

$$(document).on('page:init', '.page[data-name="single"]', function (e) {
  var rpSwiper = new Swiper ('#single-swiper', {width: 280});
});
$$(document).on('page:init', '.page[data-name="single-2"]', function (e) {
  var rpSwiper2 = new Swiper ('#single-swiper-2', {width: 280});
});

I tried things with rpSwiper.update(), rpSwiper.destroy(), observer: true etc. but is still not working

Because you are using same selectors on Swiper init, do it like:

$$(document).on('page:init', '.page[data-name="single"]', function (e, page) {
  var swiperEl = page.$el.find('#single-swiper')[0];
  var rpSwiper = new Swiper (swiperEl, {width: 280});
});

Same for other places

Like the Appstore-like custom theme by the way :+1:

It works perfectly, thank you Vladimir :wink: