swiper.js - 为 Swiper Pagination Bullet 添加多个类

Question

我正在尝试为每个分页项目符号添加一个新的 element class，并且我想保留 swiper 的默认样式。所以我做的是

pagination={
    clickable: true,
    bulletClass: `swiper-pagination-bullet ${style['feature-pagination']}`,
}

我能够获得 swiper-pagination-bullet 的样式和我的自定义样式。但是，其他功能不再起作用(例如点击功能、主动选择)

我试着检查代码，看起来 swiper 目前没有处理多个类，因为这个 line of code返回 empty 因为它只需要一个类。

有什么解决办法吗？我喜欢为此创建拉取请求，但我想问社区我在这里失踪。

Answer 1

更新

现在它支持多个类 changes .您可以通过用空格分隔它们来添加多个类

pagination={
    clickable: true,
    bulletClass: `swiper-pagination-bullet ${style['feature-pagination']}`,
}

旧

所以我请求了一个 enhancement to Swiper Repository .截至目前，处理bulletClass 和bulletActiveClass 的拉取请求仍未被接受。

同时，这是最好的解决方法。

pagination={
    clickable: true,
    bulletClass: `swiper-pagination-bullet`,
    renderBullet: (index, className) => {
    return `<span class="${className} feature-pagination"></span>`;
    }
}