Dynamic bullet's width is not properly calculated in differently-sized bullets

[Chanki-Min]

• Swiper Version: 6.5.5
• Platform/Target and Browser Versions: All browers

What You Did

Hello swiper team. I think swiper-core's pagination module does not cope with bullets with dynamic sizes. I overwrited 'swiper-pagination-bullet-active', and 'swiper-pagination-bullet' class to have wider width in active bullets. such like below snippet

.swiper-pagination-bullet {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 2px !important;
  border-radius: 2px;
  background-color: #6f7375;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  width: 16px; 
  opacity: 1;
}

and when i enabled dynamic bullets, total width of bullet container is not stable. when i slided from index 0 to index 1, dynamic bullet's container witdh jumps to 56px to 140px.

So that i look into swiperjs github repo's code, i found code like below snippet

/*  src/components/pagination/pagination.js -> from 40 line */
if (params.dynamicBullets) {
        swiper.pagination.bulletSize = bullets.eq(0)[swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'](true);
        $el.css(swiper.isHorizontal() ? 'width' : 'height', swiper.pagination.bulletSize * (params.dynamicMainBullets + 4) + "px");

according to this code, dynamic bullet's container (a.k.a $el)'s width (or height in vertical mode) is calculated like this bulletSize = current bullet list's first element's outerWidth with margin $el's width = bulletSize * (dynamicBullet param + 4)

So, in bullets with differently-sized. $el's width will jump every time when we slide.

I think we need new parameter in pagination component. to support bullet with different sizes. such as averageBulletSize.

here is simple reproduction sample link. when you slide from first to second, you can see contanier width jumps https://stackblitz.com/edit/swiper-demo-1-default-1zjtlh?file=index.html

Expected Behavior

Swiperjs pagination components need average bullet size to properly calculate bullet's container size in dynamic bullet mode

Actual Behavior

Swiperjs pagination components calculate bullet's container size via first element of bullet list.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tangibledesign]

Hello, I think the problem still exists in the current version.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.