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

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

Zmieniłem wszystkie strzałkowe na normalne i nic to nie pomogło.

Kod

const galleryTopWrapper = document.querySelector('.gallery-top .swiper-wrapper')
        const galleryThumbsWrapper = document.querySelector('.gallery-thumbs .swiper-wrapper')
        let galleryTop;
        let galleryThumbs;

        function 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.appendChild(a);
        };

        function createNew() {
            var i;
            for (i = 1; i <= 5; i++) {
                createTopOrThumbSlider(galleryTopWrapper, i);
                createTopOrThumbSlider(galleryThumbsWrapper, i);
            }

            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;


            galleryTop.update();
            galleryThumbs.update();
        };

        createNew();

        function destroyAll() {
            if (galleryTop) {
                galleryTop.removeAllSlides();
                galleryTop.destroy(true, true);
            }
            if (galleryThumbs) {
                galleryThumbs.removeAllSlides();
                galleryThumbs.destroy(true, true);
            }
        };


        function destroyAllAndCreateNew() {
            destroyAll()
            createNew()
        }

Zrobione (chyba). Chodziło o to:

Kod

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