I'm trying to set some CSS rules applied to my swiper slides which are currently active and are in the viewport, but the swiper slider only applies swiper-slide-active class to one slide not all of the slides in the viewport.
What I want to acplish is like the slick carousel which for example if you have 3 slides active and in the viewport, they will have slick-active class on all of them and slick-current class on the current active one.
Is there any way to do so? for some reason, I don't wanna switch to the Slick carousel, I'm looking for a solution for Swiper slider. By the way, I have set overflow: visible to <div class="swiper-container">
Here's a snippet: /

I'm trying to set some CSS rules applied to my swiper slides which are currently active and are in the viewport, but the swiper slider only applies swiper-slide-active class to one slide not all of the slides in the viewport.
What I want to acplish is like the slick carousel which for example if you have 3 slides active and in the viewport, they will have slick-active class on all of them and slick-current class on the current active one.
Is there any way to do so? for some reason, I don't wanna switch to the Slick carousel, I'm looking for a solution for Swiper slider. By the way, I have set overflow: visible to <div class="swiper-container">
Here's a snippet: https://jsfiddle/3u05thve/

• javascript
• html
• css
• slick.js
• swiper.js

• please create a working snippet – doğukan Commented Feb 12, 2020 at 11:48
• jsfiddle/3u05thve – M.A Shahbazi Commented Feb 12, 2020 at 11:58
• No way to solve this by swiper API (swiper-slide-active - CSS class name of the currently active slide). Add a screenshot example of the result you want to get. – Ezra Siton Commented Feb 12, 2020 at 16:30

1 Answer 1

Update a swiper to the last version and add this parameter

watchSlidesVisibility: true

After that, you can control the animation with swiper-slide-visible CSS class.

Hope it helps you.