swiper 自定义pagination分页器样式

最新推荐文章于 2024-05-09 10:19:32 发布

sunyiuhang

最新推荐文章于 2024-05-09 10:19:32 发布

阅读量1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sunyiuhang/article/details/127547896

版权

js设置 type : 'bullets',

  var mySwiper = new Swiper(".swiper",{
     pagination: {
        el: '.swiper-pagination',
        clickable:true,
        type : 'bullets',
      },
    direction:"horizontal",   
    loop:true,      
    autoplay: {
        delay: 5000,//1秒切换一次
      disableOnInteraction: false,

      },


});

其它只需要设置css！！！

.swiper-pagination .swiper-pagination-bullet {
    width: .1.7rem;
    height: .1.7rem;
    border-radius: .4rem;
    display: inline-block;
    opacity: 0.6;
    background: #fff;
}
.swiper-pagination .swiper-pagination-bullet-active {
    width: .5rem;
    height: .1.7rem;
    border-radius: .1rem;
    display: inline-block;
    opacity: 1;
    background: #fff;
}