解决vue-awesome-swiper4.x+swiper5.x分页pagination配置不生效问题

这次给的需求需要实现几个轮播图，我打算用swiper来做。刚开始我参照同事之前实现的swiper，复制到我的新页面中，是可用的。但是这次的需求需要有底下的分页pagination，而且因为版本比较老，比较难找到配置项。这里说一下具体的解决思路。

文章目录 首先是去 package.json 看到底用了哪一种swiper接着去npm官网找到对应的版本bulletClass不生效资料汇总

首先是去 package.json 看到底用了哪一种swiper

经过查找是vue-awesome-swiper，同时也可以看到具体的版本。

package.json { "swiper": "^5.4.5", "vue-awesome-swiper": "^4.1.1" } 接着去npm官网找到对应的版本

.npmjs /package/vue-awesome-swiper/v/4.1.1

官网这里刚好看到 安装命令会同时下载两个包 vue-awesome-swiper 和 swiper 。

往下找源码发现有pagination的示例。这里的源码需要看全，配置项el里面明显是指定了一个class容器的。如果template部分没有 <div class="swiper-pagination"></div> 这句话的话，分页也是不会显示的。 但其实这样是不够完成需求的，因为默认的分页颜色、间距都不对。 往下一直找到曾经的文档。 这个链接点开， .swiper /api/index.html，就是具体的配置项。 在这里找到pagination。

bulletClass不生效

.swiper /api/pagination/79.html 这里最开始有一个bulletClass（注意这个配置项里面没有点：.），于是我就按这里的配置了一下。不生效且分页也没有了。 当时并没有看到下面那个bulletActiveClass的配置项。 所以我去网上搜索了一下 bulletClass不生效 。

看到了GitHub有人提交了 issue 但没有人回复他： github /surmon-china/vue-awesome-swiper/issues/231。 后面在csdn里面发现了解决方法： blog.csdn.net/A88552211/article/details/114938500

但是这么照着做之后还有错，因为公司的vue中是用scss写的。所以需要另写一对标签，把这两个类名写在text/css里

<style type="text/css"> .my-bullet-active{ background: #ff6600; opacity: 1; } </style>

最后我回看官网，发现了bulletActiveClass： .swiper /api/pagination/80.html 但是官网写的确实很粗糙。

资料汇总

csdn解决方法 blog.csdn.net/A88552211/article/details/114938500