欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-05 18:32:06
...

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

<!-- Add Pagination -->
<div class="swiper-pagination">
                    
</div

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

.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轮播图插件中的小圆点变成背景图

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

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