centeredSlides: 'true' and .swiper-slide { width: auto; } make the slider start at the last image with missing images to the right #5075
-
Hi, When I'm using centeredSlides: 'true' in combination with .swiper-slide { width: auto; } After the first autoplay "move", the first image is centered and the images to the right are loaded, Fiddle here (the first image is the green one): The fiddle uses Swiper 7.0.8, but I've also seen this behaviour in Swiper version 5.3.6. If I turn off autoplay and look at the html, it looks like the "swiper-slide-active" class is getting assigned to the wrong slide (the last one) when the page first loads. Did I use the plugin wrong or is there a workaround for this? Kind regards, |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
I went through the Swiper code and noticed the for loop inside the Adding Hopefully this will be of use to others. Fiddle with the fix: https://jsfiddle.net/wxo9ugkz/ |
Beta Was this translation helpful? Give feedback.
I went through the Swiper code and noticed the for loop inside the
if (params.normalizeSlideIndex) { }
in the slideTo function is in this case incorrectly recalculating the slideIndex, causing the "swiper-slide-active" class to be added to the wrong slide.Adding
normalizeSlideIndex: false
to the parameters of the Swiper appears to fix the problem.It's not clear from the documentation what this parameter is supposed to do, so this might have other side effects I haven't noticed yet.
Hopefully this will be of use to others.
Fiddle with the fix: https://jsfiddle.net/wxo9ugkz/