如何在 SwiperJS 中向 3 个活动/可见/显示的幻灯片添加类名

Question

所以基本上我在

Swiper

中有一个带有 slidesPerView={3} 的轮播。我想设置未显示的滑块的样式，因此我想向可见滑块添加一个 className，或者向不可见滑块添加一个 className。我做了多次尝试：

添加这个：

slideActiveClass="swiper-slide-active"

，我注意到在文档中，它与react不兼容，这意味着它也不与nextjs兼容。但后来我在检查模式下看到，即使我没有添加

slideActiveClass="swiper-slide-active"

，活动类也在那里，所以我制作了这样的 CSS 样式：

.swiper-slide:not(.swiper-slide-active) {
    ...
}

但问题是它只对第一个显示的滑块进行样式设置，而不是对三个显示的滑块进行样式设置。

所以另一个尝试是添加这个：

slideVisibleClass='swiper-slide-visible'

，不幸的是它也与react和nextjs不兼容。虽然我确实检查了检查模式/开发工具，但与活动类不同，类名不存在。

我所做的最后一次尝试是添加以下内容：

slidesPerGroup={3}

认为它将把 3 个滑块分组并使它们成为所有活动类。但它不起作用，它所做的是使下一张幻灯片不是按 1 张而是按 3 张幻灯片。

我也尝试过寻找，但找不到更多线索。

Answer 1

目前（

slideVisibleClass

Swiper React/Vue 不支持）。最简单的解决方案是使用简单的逻辑（当然这不是flex）。

通常每个视图 3 张幻灯片（无中心模式）。此幻灯片可见：

[1_活动][2_下一个][3_最后][4][5][6]

1_活跃：

.swiper-slide.swiper-slide-active

2_下一个

.swiper-slide.swiper-slide-next

.swiper-slide.swiper-slide-next + .swiper-slide