Swiper Dynamic bullets pagination width issue

[skoapie]

Check that this is really a bug

• 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

• 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

[Mirko Kienle]

i've also just run into this issue and can confirm @skoapie 's findings. i've also found #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;

[Thuong Nguyen Quoc]

@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

[Thuong Nguyen Quoc]

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

[Thuong Nguyen Quoc]

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