swiper使用

用高版本的分页信息出不来，于是找了个低版本的，3.4.2，用回调把分页显示出来 

可以自己定义css

.swiper-pagination-customs {
    width: 30px;
    height: 4px;
    display: inline-block;
    background: #000;
    opacity: .3;
    margin: 0 5px;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
    opacity: 1;
    background-color: #F78E00;
}

paginationCustomRender

 <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            autoplay: 3000,//自动轮播
            speed: 600,
            autoHeight: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationType: 'custom',//这里分页器类型必须设置为custom,即采用用户自定义配置
            //下面方法可以生成我们自定义的分页器到页面上
            paginationCustomRender: function(swiper, current, total) {
                var customPaginationHtml = "";
                for(var i = 0; i < total; i++) {
                    //判断哪个分页器此刻应该被激活

                    if(i == (current - 1)) {
                        customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                    } else {
                        customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
                    }
                }
                return customPaginationHtml;
            }
        });
    </script>

html

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href=""><img src="../../images/index/logisticStatus.svg"></a></div>
                        <div class="swiper-slide"><a href=""><img src="../../images/index/summitOrder.svg"></a></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

Vue下亲测可用