如何在同一页面上有多个滑动器JS滑块?

Question

我在同一个页面上添加两个不同的滑块时遇到了麻烦。

当我添加。swiper2到另一个滑块的另一个div，一个滚动条出现(滑块工作，但你可以拖动和移动所有的宽度)。第一个滑块做一切正确。要注意的是，所有的东西都在同一个页面上(在主页上)。如果你需要别人进一步解释，我可以给你发截图它看起来像什么。

查看我的html和js代码:

<div class="section__thumb__tile swiper">

<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
----CONTENT----
</div>
<div class="swiper-slide">
----CONTENT----
</div>
<div class="swiper-slide">
----CONTENT----
</div>
</div>
</div>

<div class="wrapper swiper2">
<div class="section__fifth-cards swiper-wrapper">
<div class="section__fifth-card swiper-slide">            
-----Content----
</div>
<div class="section__fifth-card swiper-slide">            
-----Content----
</div>
<div class="section__fifth-card swiper-slide">            
-----Content----
</div>
</div>
</div>
</div>

----------------JS-----------------
const swiper = new Swiper(".swiper", {
// Optional parameters
loop: true,
spaceBetween: 50,
slidesPerView: 2,
freeMode: true,
speed: 500,
// Navigation arrows
navigation: {
nextEl: ".swiper-right",
prevEl: ".swiper-left",
},
breakpoints: {
// iznad 640px
640: {
slidesPerView: 2.2,
centeredSlides: true,
slidesPerGroup: 1,
freeMode: false,
},
},
});
var swiper2 = new Swiper(".swiper2", {
/* Options */
loop: true,
spaceBetween: 10,
slidesPerView: 3,
freeMode: true,
speed: 500,
centeredSlides: true,
scrollContainer: false,
wrapper: ".swiper-wrapper1",
// breakpoints: {
//   // iznad 640px
//   640: {
//     slidesPerView: 3,
//     centeredSlides: true,
//     slidesPerGroup: 1,
//     freeMode: false,
//   },
// },
});```

Answer 1

你需要在父div中添加swiper-container或者只是swiper

仅从版本6

这个版本下面的必须是swiper-container

const swiper = new Swiper(".swiper1", {
// Optional parameters
loop: true,
spaceBetween: 50,
slidesPerView: 2,
freeMode: true,
speed: 500,
// Navigation arrows
navigation: {
nextEl: ".swiper-right",
prevEl: ".swiper-left",
},
breakpoints: {
640: {
slidesPerView: 2.2,
centeredSlides: true,
slidesPerGroup: 1,
freeMode: false,
},
},
});
var swiper2 = new Swiper(".swiper2", {
loop: true,
spaceBetween: 10,
slidesPerView: 3,
freeMode: true,
speed: 500,
centeredSlides: true,
scrollContainer: false,
wrapper: ".swiper-wrapper1",
});

<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<div class="section__thumb__tile swiper swiper1">    
<div class="swiper-wrapper">
<div class="swiper-slide">
----CONTENT----
</div>
<div class="swiper-slide">
----CONTENT----
</div>
<div class="swiper-slide">
----CONTENT----
</div>
</div>
</div>

<div class="wrapper swiper swiper2">
<div class="section__fifth-cards swiper-wrapper">
<div class="section__fifth-card swiper-slide">            
-----Content----
</div>
<div class="section__fifth-card swiper-slide">            
-----Content----
</div>
<div class="section__fifth-card swiper-slide">            
-----Content----
</div>
</div>
</div>