swper实现分页器样式修改

第一步：设置分页器自定义样式

        var mySwiper = new Swiper ('.swiper-container', {
          direction: 'horizontal', // 垂直切换选项
          loop: true, // 循环模式选项
          autoplay: {
            delay: 1000,
          },
          pagination:{
            el: '.swiper-pagination',
            bulletClass : 'my-bullet',//需设置.my-bullet样式
          },
   
        }) 

第二步：自定义样式

    .my-bullet{
        display: inline-block;
        width: 13px;
        height: 3px;
        background: khaki;
        position: relative;
        margin: 0 2px;
    }

第三步：拓展原选选中的样式

    .swiper-pagination-bullet-active {
        background-color: #e8561a;
        width: 20px;
        border-radius: 20px;
    }