Customize pagination style
MatheusCarvie opened this issue · comments
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