SwiperSlide is visible not working

[emish89]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-default-react-forked-ukuwu9?file=/src/App.jsx

Bug description

I created an example to show the problem.

With this configuration:

loop={true} modules={[Navigation, EffectCoverflow, A11y, Pagination]} keyboard={false} centeredSlides navigation effect={"slide"} slideToClickedSlide pagination={{ clickable: true }} slidesPerGroup={1} spaceBetween={10} slidesPerView={1.53} coverflowEffect={{ rotate: 0, stretch: 80, depth: 200, modifier: 1, slideShadows: false }}

the isVisible property of swiperSlide hook return always false (there is the console.log).

There will be also super useful to have from this hook the "is the real active slide" property, because the property isActive is true for the slide and for all the duplicates.
Actually, the only way that I found was to search for className 'swiper-slide-active'

Expected Behavior

isVisible works fine
there is a property that returns an unique and active and visible slide valorized with the slide that actually has 'swiper-slide-active' classname

Actual Behavior

isVisible not working

Swiper version

8.2.2

Platform/Target and Browser Versions

all

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[cdpark0530]

@emish89
I faced the same issue, but I found out you need to set watchSlidesProgress property to Swiper.

<Swiper
  watchSlidesProgress
>
  ...
</Swiper>

isVisible - true when current slide is visible (watchSlidesProgress Swiper parameter must be enabled)

see https://swiperjs.com/react

[nilsalexberg]

I'm facing the same problem in Vue, and I'm adding the watchSlidesProgress prop to swiper

[theolvq]

Facing the same issue in React with watchSlidesProgress set to true
Was on an outdated version of swiper, updated to latest and it now works.

[nolimits4web]

Swiper v9 comes with fully reworked and now different loop functionality. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.