Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych
Forum PHP.pl > Forum > Przedszkole
stellatus
10.07.2020, 11:56:00
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
10.07.2020, 18:55:30
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
12.07.2020, 20:56:46
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();
        };
gitbejbe
12.07.2020, 21:45:30 
[HTML] pobierz, plaintext 
  1. var galleryTop;
  2. var galleryThumbs;
  3.  
  4. destroyAll = () => { 
  5.   if(galleryTop){
  6.     galleryTop.removeAllSlides();
  7.     galleryTop.destroy(true, true);
  8.   }
  9.   if(galleryThumbs){
  10.     galleryThumbs.removeAllSlides();
  11.     galleryThumbs.destroy(true, true);
  12.   }
  13. };
  14.  
  15. createTopOrThumbSlider = (c, d) => {
  16.   a = document.createElement('DIV');
  17.   a.classList.add('swiper-slide');
  18.   b = document.createElement('DIV');
  19.   b.classList.add('swiper-slide-container');
  20.   b.innerHTML = `Slide ${d}`;
  21.   a.appendChild(b);
  22.   c.wrapperEl.appendChild(a);
  23. };
  24.  
  25. createNew = () => {
  26.   destroyAll();
  27.   galleryTop = new Swiper('.gallery-top', {
  28.     spaceBetween: 10,
  29.     navigation: {
  30.       nextEl: '.swiper-button-next',
  31.       prevEl: '.swiper-button-prev',
  32.     },
  33.     loop: true,
  34.     loopedSlides: 4,
  35.   });
  36.   galleryThumbs = new Swiper('.gallery-thumbs', {
  37.     spaceBetween: 10,
  38.     centeredSlides: true,
  39.     slidesPerView: 'auto',
  40.     touchRatio: 0.2,
  41.     slideToClickedSlide: true,
  42.     loop: true,
  43.     loopedSlides: 4,
  44.   });
  45.   galleryTop.controller.control = galleryThumbs;
  46.   galleryThumbs.controller.control = galleryTop;
  47.   var i;
  48.   for (i = 1; i <= 5; i++) {
  49.     createTopOrThumbSlider(galleryTop, i);
  50.     createTopOrThumbSlider(galleryThumbs, i);
  51.   }
  52.   galleryTop.update();
  53.   galleryThumbs.update();
  54. };
  55.  
  56. createNew(); 
[HTML] pobierz, plaintext
stellatus
14.07.2020, 08:46:32
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.
viking
14.07.2020, 08:59:49
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
14.07.2020, 11:57:11
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()
            })
        }


To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.