[JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych Opcje

[stellatus]

Oto kod: https://codepen.io/reti/pen/qBbKZJq
Wykorzystałem tę bibliotekę: https://swiperjs.com/

Chciałbym zniszczyć galleryTop i galleryThumbs, a następnie dodać nowe slajdy. Uruchamiam funkcje: destroyAll() i createNew(). Efekt jest taki, że:

• nawigacja nie działa (zdarzenia zniknęły)
• slajdery nie są już połączone (ruch jednego z nich nie wpływa na ruch drugiego)
• kilka zdarzeń związanych z tagiem HTML zniknęło
• dwa spany również zniknęły.

Co zrobiłem źle?

Nie chcę używać mySwiper.appendSlide(slides). Kiedy używam tej metody, wszystko działa dobrze, ale bardzo powoli. Widać to dobrze, gdy dodaje się dużo slajdów.

[gitbejbe]

[HTML] pobierz, plaintext 
var galleryTop;
var galleryThumbs;
 
destroyAll = () => { 
  if(galleryTop){
    galleryTop.removeAllSlides();
    galleryTop.destroy(true, true);
  }
  if(galleryThumbs){
    galleryThumbs.removeAllSlides();
    galleryThumbs.destroy(true, true);
  }
};
 
createTopOrThumbSlider = (c, d) => {
  a = document.createElement('DIV');
  a.classList.add('swiper-slide');
  b = document.createElement('DIV');
  b.classList.add('swiper-slide-container');
  b.innerHTML = `Slide ${d}`;
  a.appendChild(b);
  c.wrapperEl.appendChild(a);
};
 
createNew = () => {
  destroyAll();
  galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
    loopedSlides: 4,
  });
  galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: 'auto',
    touchRatio: 0.2,
    slideToClickedSlide: true,
    loop: true,
    loopedSlides: 4,
  });
  galleryTop.controller.control = galleryThumbs;
  galleryThumbs.controller.control = galleryTop;
  var i;
  for (i = 1; i <= 5; i++) {
    createTopOrThumbSlider(galleryTop, i);
    createTopOrThumbSlider(galleryThumbs, i);
  }
  galleryTop.update();
  galleryThumbs.update();
};
 
createNew(); 
[HTML] pobierz, plaintext 

Ten post edytował gitbejbe 12.07.2020, 21:48:14