Customize pagination style

[MatheusCarvie]

Clear and concise description of the problem

I'm using Web Component in Angular 17

This is my structure:

<swiper-container #swiperNews class="w-[1220px] h-[650px] mt-14" [slidesPerView]="3" [spaceBetween]="40"
[grabCursor]="true" [loop]="true" [pagination]="{enabled: true, clickable: true, dynamicBullets: true}"
style="--swiper-navigation-color: #ffffff00;">
    @for (item of newsEvents(); track $index) {
        <swiper-slide>
             <app-card-news [data]="item" (clickEmit)="createModel(item)" />
        </swiper-slide>                     
    }
</swiper-container>

Basically my pagination has this default layout

I want to change its layout so that it matches the image below. I want it to be a bit square and the pagination-active to have a slightly larger width. How do I achieve these desired results?

Suggested solution

I need to somehow customize my pagination. I tried to access it via CSS but it didn't work. I don't know if it was incompatible with tailwind or something like that.

Addition of new Pagination CSS Custom Properties

• --swiper-pagination-bullet-radius
• --swiper-pagination-bullet-inactive-radius
• --swiper-pagination-bullet-inactive-size
• --swiper-pagination-bullet-inactive-width
• --swiper-pagination-bullet-inactive-height
• --swiper-pagination-bullet-inactive-radius
• --swiper-pagination-bullet-active-size
• --swiper-pagination-bullet-active-width
• --swiper-pagination-bullet-active-height
• --swiper-pagination-bullet-active-radius

Alternative

No response

Additional context

No response

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.

Would you like to open a PR for this feature?

• I'm willing to open a PR