[JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych |
[JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych |
10.07.2020, 11:56:00
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
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:
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. |
|
|
10.07.2020, 18:55:30
Post
#2
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
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
|
|
|
12.07.2020, 20:56:46
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
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 |
|
|
12.07.2020, 21:45:30
Post
#4
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
Ten post edytował gitbejbe 12.07.2020, 21:48:14 |
|
|
14.07.2020, 08:46:32
Post
#5
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
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 |
|
|
14.07.2020, 08:59:49
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
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.
-------------------- |
|
|
14.07.2020, 11:57:11
Post
#7
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
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() }) } |
|
|
Wersja Lo-Fi | Aktualny czas: 26.04.2024 - 10:02 |