 [JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych |
| [JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych |
 
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. |
 |
 
|
 |
|
Post
#2
|
|
|
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 |
|
|
|
stellatus [JavaScript][swiper.js] Usuwanie slajdów i dodawanie nowych 10.07.2020, 11:56:00 
gitbejbe widze w czym masz problem, trochę pogrzebałem. Na ... 10.07.2020, 18:55:30 stellatus Tak będzie chyba najlepiej. Spróbuję i dam znać.
... 12.07.2020, 20:56:46 gitbejbe [HTML] pobierz, plaintext var galleryTop;var galle... 12.07.2020, 21:45:30 viking Może, bez szczególnego wgłębiania się w kod, powie... 14.07.2020, 08:59:49 
stellatus https://codepen.io/reti/pen/rNxrGwP
Zmieniłem wsz... 14.07.2020, 11:57:11  |
|
Aktualny czas: 8.10.2025 - 09:58 |
