关于修改swiper轮播图插件中的小圆点变成背景图
程序员文章站
2022-07-05 18:32:06
...
当我们使用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()去掉即可。
下面是效果图:
上一篇: 洛谷 P1525 关押罪犯(二分 + 二分图判定)
下一篇: 酒鬼的愿望