I am trying to add a new element class
to each of my pagination bullet, and I want to retain the default style of the swiper
. So what I did is
pagination={
clickable: true,
bulletClass: `swiper-pagination-bullet ${style['feature-pagination']}`,
}
I was able to get the style of swiper-pagination-bullet
and my custom style. However, the other functionalities is not working anymore (e.g. click function, active selection)
I tried to check the code and it looks like the swiper
is not currently handling multiple class, since this line of code returns empty
since it is only expecting a single class only.
Is there any work around for this? I like to create pull request for this, but I like to ask the community of I am missing in here.
Now it support multiple class with this changes. You can add multiple class by separating them with spaces
pagination={
clickable: true,
bulletClass: `swiper-pagination-bullet ${style['feature-pagination']}`,
}
So I requested an enhancement to Swiper Repository. As of the moment, the pull request to handle bulletClass
and bulletActiveClass
still haven't accepted.
For the mean time, this is the best workaround for it.
pagination={
clickable: true,
bulletClass: `swiper-pagination-bullet`,
renderBullet: (index, className) => {
return `<span class="${className} feature-pagination"></span>`;
}
}