為什么不在一頁上使用 swipre 使用多個 Thumbs 圖庫

Question

我有一個包含三張幻燈片的頁面（pageSwiper）。 場景是，當單擊這些幻​​燈片中的每一個時，將打開一個模態，並且每個模態（mySwiper2、mySwiper）內都會有一個“拇指圖庫”。 但是由於存在多個“拇指圖庫”，這些（swiper-button-next、swiper-button-prev）項不起作用。 如果您有解決此問題的建議，感謝您告訴我。 預先感謝您的合作。

 var swiperpage = new Swiper(".pageSwiper", { spaceBetween: 30, effect: "fade", navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", clickable: true, }, }); var swiper = new Swiper(".mySwiper", { loop: true, spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true, }); var swiper2 = new Swiper(".mySwiper2", { loop: true, spaceBetween: 10, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, thumbs: { swiper: swiper, }, });

 .page--slider{ padding: 0 56px; height: 600px; margin-bottom: 50px; padding: 2rem; } .pageSwiper .swiper { width: 100%; height: 100%; } .pageSwiper .swiper-slide { background-position: center; background-size: cover; } .pageSwiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .pageSwiper .swiper-button-next, .pageSwiper .swiper-button-prev{ color: rgba(0,0,0,.8) !important; } .pageSwiper .swiper-button-next:after, .pageSwiper .swiper-button-prev:after { font-size: 40px !important; font-weight: bolder !important; } .pageSwiper .swiper-pagination-bullet { width: 13px !important; height: 13px !important; background: rgba(0,0,0,.5) !important; } .pageSwiper .swiper-pagination-bullet:hover{ background: rgba(0,0,0,.7) !important; } .pageSwiper .swiper-pagination-bullet-active{ background: rgba(0,0,0,.9) !important; } /* The Modal */ .modal { display: none; position: fixed; z-index: 1100; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); border: 2px solid red; } .modal-content { -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; width: 50%; height: 450px; max-height: 90%; padding: 0 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); border: 2px solid green; background-color: var(--cw); border-radius:8px; padding: 13px; display: flex; flex-direction: column; } .modal-content-slider{ width: 100%; height: 85%; border: 2px solid black; } .modal-content-buttons{ width: 100%; height: 15%; border: 2px solid red; } .modal-content-close{ width:40px; height:40px; background-color: black; border-radius:50%; margin-left: auto; margin-top: 0.5rem; position: relative; } .close { color: var(--cw); position: absolute; text-shadow: 0px 1px 2px rgb(0 0 0 / 90%); font-size: 40px; font-weight: 100; cursor: pointer; left: 50%; top: 50%; margin: auto 0; transform: translate(-50%, -50%); } .close:hover{ opacity: .5; } /* swiper Modal */ .modal .swiper { width: 100%; height: 100%; } .modal .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* 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; } .modal .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .modal .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .modal .swiper-slide { background-size: cover; background-position: center; } .modal .mySwiper2 { height: 80%; width: 100%; } .modal .mySwiper { height: 20%; box-sizing: border-box; padding: 10px 0; } .modal .mySwiper .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .modal .mySwiper .swiper-slide-thumb-active { opacity: 1; } .modal .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

 <div> <div class="page--slider"> <div class="swiper pageSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div> <img src="https://swiperjs.com/demos/images/nature-8.jpg" class="myBtn_multi"/> </div> </div> <div class="swiper-slide"> <div> <img src="https://swiperjs.com/demos/images/nature-12.jpg" class="myBtn_multi"/> </div> </div> <div class="swiper-slide"> <div> <img src="https://swiperjs.com/demos/images/nature-10.jpg" class="myBtn_multi"/> </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> </div> </div> <!-- The Modals --> <div> <div class="modal modal_multi"> <div class="modal-content"> <div class="modal-content-slider"> <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> </div> </div> </div> <div class="modal-content-buttons"> <div class="modal-content-close"> <span class="close close_multi">&times;</span> </div> </div> </div> </div> <div class="modal modal_multi"> <div class="modal-content"> <div class="modal-content-slider"> <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> </div> </div> </div> <div class="modal-content-buttons"> <div class="modal-content-close"> <span class="close close_multi">&times;</span> </div> </div> </div> </div> <div class="modal modal_multi"> <div class="modal-content"> <div class="modal-content-slider"> <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> </div> </div> </div> <div class="modal-content-buttons"> <div class="modal-content-close"> <span class="close close_multi">&times;</span> </div> </div> </div> </div> </div>

Answer 1

這是這個問題的答案： https : //raddy.co.uk/blog/multiple-instances-of-swiperjs-on-the-same-page-with-the-same-settings/

創建幾個具有相同類名稱“swiper-container”的滑塊（您可以添加任意數量的滑塊）。 您的代碼應該與我的相似：

HTML：

<div class="swiper-container">
   <div class="swiper-slide">Slide 1</div>
   <div class="swiper-slide">Slide 2</div>
   <div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
   <div class="swiper-slide">Slide 1</div>
   <div class="swiper-slide">Slide 2</div>
   <div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
   <div class="swiper-slide">Slide 1</div>
   <div class="swiper-slide">Slide 2</div>
   <div class="swiper-slide">Slide 3</div>
</div>

現在我們需要選擇類名“swiper-container”，遍歷頁面上每個可用元素（例如：div、section），然后為每個元素添加一個新的唯一類名以初始化唯一的Swiper。

const myCustomSlider = document.querySelectorAll('.swiper-container');
for( i=0; i< myCustomSlider.length; i++ ) {
  myCustomSlider[i].classList.add('swiper-container-' + i);
  var slider = new Swiper('.swiper-container-' + i, {
  /* Options */
  });
}