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

widze w czym masz problem, trochę pogrzebałem. Na pewno idzie to zrobić na tej samej instacji ale nie chce mi się dłużej nad tym siedzieć. Spróbuj usuwać całkowicie instancje i tworzyć za każdym razem nowe

[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

[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

[stellatus]

Dzięki, ale to nie działa: https://codepen.io/reti/pen/dyGjpEx Zapętlenie ciągle nie chce się utworzyć.

Mam coś takiego: https://codepen.io/reti/pen/rNxrGwP

Kod

<head>
    <meta charset="ISO-8859-1">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
            height: 300px;
        }
        
        .swiper-container {
            width: 100%;
            height: 300px;
            margin: 20px auto;
        }
        
        .swiper-slide-container {
            text-align: center;
            font-size: 18px;
            background: #fff;
            height: 100%;
            max-width: 600px;
            margin: auto;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .gallery-top {
            height: 80%;
            width: 100%;
        }
        
        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
        }
        
        .gallery-thumbs .swiper-slide {
            width: 20%;
            height: 100%;
            opacity: 0.4;
        }
        
        .gallery-thumbs .swiper-slide-active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
        </div>
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const galleryTopWrapper = document.querySelector('.gallery-top .swiper-wrapper')
        const galleryThumbsWrapper = document.querySelector('.gallery-thumbs .swiper-wrapper')
        let galleryTop;
        let galleryThumbs;

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

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

        destroyAll = () => {
            if (galleryTop) {
                galleryTop.removeAllSlides();
                galleryTop.destroy(true, true);
            }
            if (galleryThumbs) {
                galleryThumbs.removeAllSlides();
                galleryThumbs.destroy(true, true);
            }
        };
    </script>
</body>

Jest źle, bo ciągle występuje ten błąd "this.params is undefined". Gdy pomiędzy wywołaniami destroyAll() i createNew() jest przerwa to działa, ale gdy wywołania następują bezpośrednio po sobie:

Kod

destroyAllAndcreateNew = () => {
            destroyAll()
            createNew()
        }
destroyAllAndcreateNew()

to wykonywanie kodu zostaje przerwane.

Ten post edytował stellatus 14.07.2020, 08:46:57

[viking]

Może, bez szczególnego wgłębiania się w kod, powiem źle ale używasz funkcji strzałkowch które zmieniają kontekst this, dodatkowo na starej wersji biblioteki.

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