Swiper.js - Usuwanie slajdów i dodawanie nowych

Question

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.

* edycja: w konsoli

 

Comments

Uruchamiam funkcje: destroyAll() i createNew()

W którym miejscu je wywołujesz? W kodzie na CodePen tego nie widać. Przeklikałem slajdy i też żadna z tych funkcji się nie uruchomiła.

---

Sorry, nie napisałem, że chodzi o uruchomienie w konsoli.

---

Skoro chcesz najpierw zniszczyć dotychczasowe slajdy, a potem dodać nowe, to czemu nie stworzysz osobnej galerii (osobna instancja) i w wybranym momencie nie podmienisz galerii?

---

Niezły pomysł. Dzięki:) Spróbuję i dam znać.

Answer 1

https://codepen.io/reti/pen/WNrKvNZ

Coś zrobiłem źle, bo po wywołaniu destroyAll() wyskakuje błąd: "this.params is undefined", a po wywołanu createNew() chyba wszystko jest w porządku z wyjątkiem tego, że nie działa zapętlenie w obydwóch slajderach.

var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  loopedSlides: 4,
});
var 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;

destroyAll = () => {
  galleryTop.removeAllSlides();
  galleryTop.destroy(true, true);
  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 = () => {
  var galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
    loopedSlides: 4,
  });
  var 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();
};

 

Comments

Czego dotyczy błąd this.params is undefined? Na CodePen pojawia się inny błąd "TypeError: Cannot read property 'cssMode' of undefined".

---

U mnie jest tak: https://snipboard.io/gjIaUl.jpg

A w konsoli przeglądarki wygląda to tak: https://snipboard.io/fewLSM.jpg

Takie rozwiązanie też nie działa: https://codepen.io/reti/pen/dyGjpEx

Answer 2

Zrobione (chyba): https://codepen.io/reti/pen/QWyVbeB Chodziło o to:

function destroyAll() {
            if (galleryTop) {
                galleryTop.destroy(true, true);
            }
            if (galleryThumbs) {
                galleryThumbs.destroy(true, true);
            }
            document.querySelectorAll('.swiper-slide').forEach(el => {
                el.remove()
            })
        }