html:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
test1
</div>
</div>
<div class="swiper-pagination"></div>
</div>
css:
/*分页器样式*/
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
width: 1.1rem;
height: 0.2rem;
border-radius: 25%;
}
/*分页器选中*/
.swiper-pagination-bullet-active {
background-image: linear-gradient(90deg, #ffb23c 0%, #ff7a1d 100%), linear-gradient( #ffffff, #ffffff) !important;
width: 1.1rem !important;
}
注:
需要引用swiper.css以及swiper.js文件