Adding multiple class for Swiper Pagination Bullet

Question

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.

Answer 1

Update

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']}`,
}

Old

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>`;
    }
}