swiperページャのスタイル

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： 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.jsを参照する必要がSwiper.css