Swiper Dynamic bullets pagination width issue

[skoapie]

Check that this is really a bug

• [X] I confirm

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

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] 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

[mirko-kienle]

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

[skoapie]

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;

[thuongbkit]

@skoapie I am also having this issue, can you help a way to temporary fix ? thanks

[skoapie]

@thuongbkit

1. Open the file node_modules/swiper/modules/pagination.mjs.
2. Locate line 111, which originally reads: bulletSize = elementOuterSize(bullets[0], swiper.isHorizontal() ? 'width' : 'height', true);
3. Replace this line with: bulletSize = 24; (24 is the bullet size, u can make it whatever u want)
4. Install patch-package via ssh npm install patch-package postinstall-postinstall
5. Run the following via ssh npx patch-package swiper

Note this only works with Swiper via NPM

[thuongbkit]

thank you very much @skoapie. I will try it. btw, my swiper version is 8.4.7, hope your solution will be resolved.

[thuongbkit]

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