Swiper incorrectly calculates last slide as activeSlide on load.

[learyjk]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-bug-loop-centered-auto-width-kwj8ls?file=/index.html

Bug description

a slider with slidesPerView set to 'auto' in loop mode and centeredSlides set to true calculates the last slide as the active slide on load. In the demo you'll see that the first slide shown is slide 7, not slide 1.

• changing the slide width in CSS from 20% to 21% causes the first slide to show.

• can also play with initialSlide value to correct it.

My guess is some sort of math error when calculating the first slide when combo of slidesPerView 'auto', centeredSlides true, and loop mode are all in play.

Expected Behavior

• I expect Slide 1 to be the first to show in the provided example.
• I expect changing slide width in CSS to not change which slide is calculated to be first (i.e. I expect when initalSlide is set to 0, the first slide is shown.)

Actual Behavior

The last slide in the html is calculated to be the active slide on load.

Swiper version

11.0.5

Platform/Target and Browser Versions

Chrome, Safari

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

[huggie1984]

+1.
Having a similar issue when component is mounted -> unmounted -> mounted.
In some cases the last slide is the initial slide.

We using the following modules and the following props.

<Swiper slidesPerView={'auto'} spaceBetween={32} centeredSlides initialSlide={1} pagination={{ clickable: true, dynamicBullets: true, }} navigation={{ clickable: true, nextEl: '.button-next', prevEl: '.button-prev', }} modules={[Navigation, Pagination]} >

[learyjk]

@huggie1984 yea I've been doing more testing and getting the result at odd ranges of slide widths.

I'm setting slide width in % and spaceBetween is 16. The following percent values cause last slide to render first.
50-100%
24-33%
17-19%
13-14%

Seeing this behavior in swiper studio as well.

[kirtikadam]

Facing same issue. Did you find any solution

[huggie1984]

Hi @kirtikadam, it was a while since I worked with this.

For me it may have been related to the number of slides. Try having a minimum of 3+ slides when you init the carousel or enough slides off screen , duplicate slides if you need to.
Three slides with no slide after prev or before next was giving me weird side effects

another solution was to tap into the onAfterInit method and manually force the position.

good luck.

[hdeo12345]

I found this same issue and my solution was to do a ".slideTo()" within the onInit function, not ideal but was the only way I found for my use case

onInit={swiper => swiper.slideToLoop(0, 0)}