swiper在vue中的分页器自定义样式

最新推荐文章于 2023-11-17 15:11:41 发布

zhang@h

最新推荐文章于 2023-11-17 15:11:41 发布

阅读量557

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/promiseZhanghe/article/details/105860452

版权

.swiper-container-horizontal{
      >.swiper-pagination-bullets{
          bottom: 16px;
          left: 0;
          width: 100%;
        .swiper-pagination-bullet{
          width: 20px;
          height: 10px;
          display: inline-block;
          border-radius: 0;
          background: pink;
          // opacity: 0.2;
        &.swiper-pagination-bullet-active{
          background: red;
        }
       }
      }
    }

分页器用默认的小圆点样式，然后改里面的样式，用插件里面自带的样式名字去改，打开调试器去看是那些默认的class样式。一定要全部覆盖原有的样式