swiper轮播图分页器样式修改

swiper轮播图分页器样式修改

引入swiper样式文件后（没有压缩的），在文件中查找.swiper-pagination-bullet类，如下图所示

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

修改里面的width height就可以啦。

①前提要引入swiper-bundle.css样式文件
②新建的css文件要在引入的swiper样式文件的后面，不然效果无法实现，因为后面的css文件会覆盖前面css文件样式