用swiper实现不规则分页滚动 & 给分页器加颜色

效果图

 

移动端想实现这样的效果, 可以先安装swiper

npm install swiper

 

template代码：

<div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../../assets/images/mobile/invoicepickup/swiper_banner.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../../assets/images/mobile/invoicepickup/swiper_banner.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../../assets/images/mobile/invoicepickup/swiper_banner.png">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <!--                <div class="swiper-button-prev"></div>-->
                <!--                <div class="swiper-button-next"></div>-->

                <!-- 如果需要滚动条 -->
                <!--    <div class="swiper-scrollbar"></div>-->
            </div>

 JS代码

new Swiper ('.swiper-container', {
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            // nextButton: '.swiper-button-next',
            // prevButton: '.swiper-button-prev',
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            //如果需要自动切换海报
            // autoplay: {
            //   delay: 1,//时间 毫秒
            //   disableOnInteraction: true,//用户操作之后是否停止自动轮播默认true
            // },
            slidesPerView: 'auto',//默认一个屏幕显示几张图，必须auto！
            centeredSlides: true,//每屏，居中显示
            spaceBetween: 10
        });

 CSS关键代码

.swiper-slide{
        padding:0 0.5rem !important;
    }

 其他代码依据实际需要增减

 

给分页器加颜色:

    .swiper-pagination >>> .swiper-pagination-bullet-active{
        background-color: white;

    }