How to add a classname to the 3 Active/Visible/Shown Slides in SwiperJS

Atif Khan 0
Viewed 22

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.

  • "swiper": "^8.4.2"
  • "next": "12.3.0",
  • "react": "18.2.0",
slider swiper.js carousel next.js css
1 Answers

For now (slideVisibleClass Not supported in Swiper Angular/React/Svelte/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
  1. 3_last: + selector select slide placed immediately after 2
.swiper-slide.swiper-slide-next + .swiper-slide
Ezra Siton0
Related