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

Question

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

Answer 1

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

watchSlidesVisibility: true

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

希望对你有帮助。