So basically I have a carousel with slidesPerView={3} in Swiper. and I want to style the sliders that are not shown, so I want to either add a className to the visible sliders or I would add a className to the not visible sliders. There are multiple attempts I did which are:
adding this: slideActiveClass="swiper-slide-active" and I noticed that in the documentation, it wasn't compatible with react which means it isn't compatible with nextjs aswell. But then I saw in the inspect mode that the active class is there even if I didnt added slideActiveClass="swiper-slide-active" so I made the CSS style like this:
.swiper-slide:not(.swiper-slide-active) {
...
}
but the problem was that it was only styling the first shown slider not the three shown sliders.
So another attempt was by adding this: slideVisibleClass='swiper-slide-visible' which also was unfortunately not compatible with react and nextjs. Though I did checked the inspect mode/dev tools and the className wasn't there unlike the active class.
The last attempt I did was adding this: slidesPerGroup={3} thinking that it would group there 3 sliders and make them all active classes. But it didn't work, what it made was to make the next slide not by 1 but by 3 slides each next slide.
I tried searching too but couldn't find any more clues.
For now (slideVisibleClass Not supported in Swiper React/Vue). The most simple solution is to use simple logic (Of course this is not flex).
In general for 3 slides per view (Without center mode). This slides are visible:
[1_active][2_next][3_last][4][5][6]
1_active:
.swiper-slide.swiper-slide-active
2_next
.swiper-slide.swiper-slide-next
3_last: + selector select slide placed immediately after 2.swiper-slide.swiper-slide-next + .swiper-slide