Swiper插件之如何使用.swiper-pagination-bullet和.swiper-pagination-bullet-active快速修改自定义分页器样式

潇xiao雨未歇

已于 2022-06-17 21:51:31 修改

阅读量3k

点赞数 1

分类专栏：基础笔记文章标签： html css 前端

于 2022-06-17 15:19:03 首次发布

本文链接：https://blog.csdn.net/qq_53985958/article/details/125333815

版权

基础笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Swiper插件中改变默认的分页器样式，将蓝色小圆点替换为自定义图片。通过设置observer和observeParents属性实现轮播图样式变化的监听，利用.swiper-pagination-bullet和.swiper-pagination-bullet-active类修改分页器的背景样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用场景：

希望将Swiper插件中分页器的默认样式(小圆蓝点)，替换成自己的图片(小图标)

解决方法：

在初始化轮播图中配置监视器：

observer: 更改swiper 的样式(隐藏/显示)或修改其子元素(添加/删除),Swiper 会更新(重新初始化)并触发 observerUpdate 事件。
observeParents: 应用于Swiper 的所有祖先元素。当Swiper 的祖先元素发生变化时，例如show/hide、第一级子元素增加/删除等，则更新Swiper 并触发 observerUpdate 事件。

pagination:{
  observer: true,//开启动态检查器，监测swiper和slide
  observeParents: true//监测Swiper 的祖/父元素
｝

在样式中使用.swiper-pagination-bullet和.swiper-pagination-bullet-active对分页器背景进行修改:

.swiper-pagination .swiper-pagination-bullet {
  width: 27px;
  height: 24px;
  /*图片路径*/
  background: url(路径地址)
    no-repeat left center;
}
/*显示当前活动块的图片*/
.swiper-pagination .swiper-pagination-bullet-active {
  width: 27px;
  height: 24px;
  /*图片路径*/
  background: url(路径地址)
    no-repeat right center;
}