很长一段时间（周，月）我试图通过可见幻灯片中的不透明度显示框。一切都很好，但在滑动循环后的第1和第2张幻灯片之间，我们可以看到 Flink 的所有幻灯片，我不知道如何解决这个问题。want .swiper-container不要溢出：隐藏并显示所有可见的幻灯片。我搜索了整个互联网，没有找到解决这个问题的方法。我将非常感谢您的帮助。
这是我的代码：
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box">1</div>
</div>
<div class="swiper-slide">
<div class="box">2</div>
</div>
<div class="swiper-slide">
<div class="box">3</div>
</div>
<div class="swiper-slide">
<div class="box">4</div>
</div>
<div class="swiper-slide">
<div class="box">5</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>.box {
background: green;
height: 200px;
opacity: 0;
transition: all 0.2s ease;
}
.swiper-slide .box {
opacity: 0;
}
.swiper-slide-visible .box {
opacity: 1;
}let slider;
$('.swiper-container').each(function(){
slider = new Swiper($(this)[0], {
slidesPerView: 3,
spaceBetween: 50,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
watchOverflow: true,
watchSlidesVisibility: true
});
});
2条答案
按热度按时间rslzwgfq1#
将下面的内容添加到.swiper-slide类或切换到css only模式
字符串
kyxcudwk2#
我也有类似的问题，因为我发现它发生，如果大量的图像在滑块。我试图改变滑块到滑块，它的工作原理是一样的（