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

适用场景:

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

解决方法:

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

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

pagination:{
   
  observer: true,//开启动态检查器,监测swiper和slide
  observeParents

你可能感兴趣的:(基础笔记,html,css,前端)