Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swiper incorrectly calculates last slide as activeSlide on load. #7216

Open
5 of 6 tasks
learyjk opened this issue Nov 27, 2023 · 5 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests
Open
5 of 6 tasks

Swiper incorrectly calculates last slide as activeSlide on load. #7216

learyjk opened this issue Nov 27, 2023 · 5 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests

Comments

@learyjk
Copy link

learyjk commented Nov 27, 2023

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
Copy link

+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
Copy link
Author

learyjk commented Nov 29, 2023

@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.

yasuhiro-yamamoto added a commit to yasuhiro-yamamoto/contribute-swiper that referenced this issue Dec 3, 2023
Fixed behavior where the combination of 'initialSlide:0' and
'slidesPerView:auto' would shift the first slide position
@kirtikadam
Copy link

Facing same issue. Did you find any solution

@huggie1984
Copy link

huggie1984 commented Feb 1, 2024

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.

@harrisondeo
Copy link

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)}

nolimits4web added a commit that referenced this issue Feb 5, 2024
…idesPerView:auto' would shift the first slide position

* fix: initialSlide #7216
Fixed behavior where the combination of 'initialSlide:0' and
'slidesPerView:auto' would shift the first slide position

* remove debug

---------

Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment