为什么不在一个页面上使用多个拇指图库

Question

我有一个包含三个幻灯片的页面(pageSwiper)。场景是，当这些幻灯片被点击时，一个模态将会打开，并且会有一个"拇指图库"。在每个模态(mySwiper2, mySwiper)。但是由于存在几个"拇指图库"，这些(滑动按钮-下一步，滑动按钮-上一步)项不起作用。如果你有解决这个问题的建议，谢谢你告诉我。事先感谢您的合作。

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)，然后为每个元素添加一个新的唯一类名来初始化唯一的Swipers。

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