Open skoapie opened 2 months ago
i've also just run into this issue and can confirm @skoapie 's findings. i've also found https://github.com/nolimits4web/swiper/issues/4453 with additional information, unfortunately it was closed as stale
thanks for the reaction! They did change a lot of code surrounding the pagination since 2019 but this bug still seems to be there.
I fixed it by manually setting the bulletSize variable to 24 and creating a patch, file: node_modules/swiper/modules/pagination.mjs line 111 ( bulletSize = elementOuterSize(bullets[0], swiper.isHorizontal() ? 'width' : 'height', true); ) now is: bulletSize = 24;
@skoapie I am also having this issue, can you help a way to temporary fix ? thanks
@thuongbkit
Note this only works with Swiper via NPM
thank you very much @skoapie. I will try it. btw, my swiper version is 8.4.7, hope your solution will be resolved.
it works perfectly @skoapie
swiper version: 8.4.7
open the file node_modules/swiper/modules/pagination.js, and change bulletSize = 24
bulletSize = 24 // bullets.eq(0)[swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'](true);
Check that this is really a bug
Reproduction link
https://codepen.io/Andrew-Lautenbach/pen/PovXeWX
Bug description
When using dynamicBullets and a custom width on the active bullet, the pagination element breaks it's normal width, it always happens on the second slide & weirdly only on the first slide on page load
Expected Behavior
Normal width on the swiper-pagination element
Actual Behavior
Swiper pagination width goes from +- 150px to 400px
Swiper version
11.1.4
Platform/Target and Browser Versions
MacOS 14.5 (23F79) Chrome 126.0.6478.127
Validations
Would you like to open a PR for this bug?