[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.

[stellatus]

Tak będzie chyba najlepiej. Spróbuję i dam znać.

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.

Kod

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

Ten post edytował stellatus 12.07.2020, 20:57:24