• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Swiper.js - Usuwanie slajdów i dodawanie nowych

VPS Starter Arubacloud
0 głosów
595 wizyt
pytanie zadane 10 lipca 2020 w JavaScript przez mikolaj.k Obywatel (1,430 p.)
edycja 10 lipca 2020 przez mikolaj.k

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

 

komentarz 10 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 10 lipca 2020 przez mikolaj.k Obywatel (1,430 p.)
Sorry, nie napisałem, że chodzi o uruchomienie w konsoli.
komentarz 10 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)
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?
komentarz 10 lipca 2020 przez mikolaj.k Obywatel (1,430 p.)
edycja 10 lipca 2020 przez mikolaj.k
Niezły pomysł. Dzięki:) Spróbuję i dam znać.

2 odpowiedzi

0 głosów
odpowiedź 12 lipca 2020 przez mikolaj.k Obywatel (1,430 p.)

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();
};

 

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

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

komentarz 13 lipca 2020 przez mikolaj.k Obywatel (1,430 p.)
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
0 głosów
odpowiedź 13 lipca 2020 przez mikolaj.k Obywatel (1,430 p.)
edycja 14 lipca 2020 przez mikolaj.k

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()
            })
        }

 

Podobne pytania

+1 głos
2 odpowiedzi 204 wizyt
0 głosów
1 odpowiedź 98 wizyt
pytanie zadane 11 marca 2019 w JavaScript przez Bakr Mądrala (6,850 p.)
+1 głos
2 odpowiedzi 547 wizyt

93,025 zapytań

141,990 odpowiedzi

321,292 komentarzy

62,371 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...