关于修改swiper轮播图插件中的小圆点变成背景图

当我们使用swiper插件时,底部的小点点需要修改成图片样式的形状,下面分享一下如何修改:关于修改swiper轮播图插件中的小圆点变成背景图_第1张图片


找到上面插件中对应的代码,这就是小点点对应的代码,下面是如何修改:

.swiper-pagination .swiper-pagination-bullet:nth-child(1){
 background: url(../首页/img/tu1.png);
 width: 82px;
 height: 82px;

}
.swiper-pagination .swiper-pagination-bullet:nth-child(2){
  background: url(../首页/img/tu2.png);
  width: 82px;
  height: 82px;
 }
 .swiper-pagination .swiper-pagination-bullet:nth-child(3){
  background: url(../首页/img/tu3.png);
  width: 82px;
  height: 82px;
 }

可以分别选取不同的点点进行修改样式,主要思路是用css样式覆盖,自己写一些想要的样式进行修改。如果想统一修改,那就把nth-child()去掉即可。

下面是效果图:

关于修改swiper轮播图插件中的小圆点变成背景图_第2张图片

关于修改swiper轮播图插件中的小圆点变成背景图_第3张图片

你可能感兴趣的:(swiper,小点点,轮播图)