CODEWITHSUNDEEP
javascripthtmlcssslick.jsswiper.js
M.A Shahbazi
M.A Shahbazi

Reputation: 1081

Swiper slider active class on slides in viewport and current class on one only

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 accomplish 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.net/3u05thve/

Upvotes: 3

Views: 11788

Answers (1)

Oleg Sevruk
Oleg Sevruk

Reputation: 1049

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.

Upvotes: 5

Related Questions