javascript - Swiper 滑块在视口中的幻灯片上的活动类和当前类仅在一个上

Question

我正在尝试将一些 CSS 规则应用于当前处于活动状态且位于视口中的滑动器幻灯片，但滑动器滑块仅将swiper-slide-active类应用于一张幻灯片，而不是视口中的所有幻灯片。
我想要完成的就像光滑的轮播一样，例如，如果您有 3 张幻灯片处于活动状态并且在视口中，它们将对slick-active所有幻灯片进行slick-current分类，并对当前活动的幻灯片进行分类。
有什么办法吗？出于某种原因，我不想切换到 Slick 轮播，我正在寻找 Swiper 滑块的解决方案。顺便说一句，我已经设置overflow: visible为<div class="swiper-container">
这是一个片段： https ://jsfiddle.net/3u05thve/

标签： javascripthtmlcssslick.jsswiper

Answer 1

将 swiper 更新到最新版本并添加此参数

watchSlidesVisibility: true

之后，您可以使用swiper-slide-visible CSS 类控制动画。

希望它可以帮助你。