Swiper js and React: How to pass React state when swiping left or right to prev/next slide

[meesfrenkelfrank]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-react-state-swiper-8-op0ij8

Bug description

I am using Swiper js for my React slider.

I'am looping over an Object Object.values(FilterMap).map((Filter, index) and return the Swiper slides.

I have some (filter) buttons as swiper slides, to filter content when selecting/clicking a slide button.

The active slide (which gets css class swiper-slide-active by the swiper api) should always be centered. That's working fine from the api with the following props:

centeredSlides and slideToClickedSlide

But when I 'swipe' the slides to left or right, the swiper active slide get centered, but my other logic on the selected button data-active={true} is now not in sync with swipers active slide.

How to fix this?

Here is the CodeSandbox, with an example what I have so far.

Expected Behavior

When swipe the slide to prev or next slide, the passed state from the onChange prop data-active={true} will be applied when swiping the slides. So data-active={true} and slide with css class swiper-slide-active are always centered.

No response

Actual Behavior

No response

Swiper version

8.0.7

Platform/Target and Browser Versions

Google Chrome Version 99.0.4844.84

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