解决vue-awesome-swiper 4.x + swiper 5.x 分页pagination配置不生效问题

aPurpleBerry

已于 2025-02-19 14:36:11 修改

阅读量970

点赞数 5

分类专栏：问题解决前端demo 文章标签： vue.js 前端 javascript

于 2025-02-17 14:21:41 首次发布

本文链接：https://blog.csdn.net/yavlgloss/article/details/145681576

版权

问题解决同时被 2 个专栏收录

18 篇文章

订阅专栏

前端demo

4 篇文章

订阅专栏

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

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

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

package.json

{
    "swiper": "^5.4.5",
    "vue-awesome-swiper": "^4.1.1"
}

接着去npm官网找到对应的版本

https://www.npmjs.com/package/vue-awesome-swiper/v/4.1.1

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

在这里插入图片描述
往下找源码发现有pagination的示例。这里的源码需要看全，配置项el里面明显是指定了一个class容器的。如果template部分没有 <div class="swiper-pagination"></div> 这句话的话，分页也是不会显示的。

但其实这样是不够完成需求的，因为默认的分页颜色、间距都不对。
往下一直找到曾经的文档。
在这里插入图片描述
这个链接点开，https://www.swiper.com.cn/api/index.html，就是具体的配置项。

在这里找到pagination。

bulletClass不生效

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

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

在这里插入图片描述

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

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

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

资料汇总

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