Currently, I am working on customizing a carousel in Swiper with slidesPerView={3}. My goal is to style the sliders that are not visible on the screen. I have made multiple attempts to achieve this:
First, I tried adding the attribute
slideActiveClass="swiper-slide-active".swiper-slide:not(.swiper-slide-active) {
/* CSS styles here */
}
The above styling method only targeted the first visible slider, not all three visible sliders as intended.
Next, I attempted to use
slideVisibleClass='swiper-slide-visible'Lastly, I experimented with slidesPerGroup={3} thinking it would group the 3 sliders and apply the active class to all of them. However, this resulted in advancing by 3 slides instead of 1 for each navigation action.
Despite searching for more insights, I have yet to find a suitable solution to style the non-visible sliders effectively.
- "swiper": "^8.4.2"
- "next": "12.3.0",
- "react": "18.2.0",