swiper分页器样式

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/102756614

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文件