h5使用swiper示例

    <script src="/public/static/index/assets/js/Swiper-4.0.7/swiper.min.js"></script>
 <script>
        $(function () {
            FastClick.attach(document.body);
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                autoplay: true,
                // // 如果需要分页器
                pagination: '.swiper-pagination',
                paginationClickable: true,
                paginationType: 'customs',
                autoplayDisableOnInteraction: false,
                pagination: {
                    el: '.swiper-pagination',
                },

            })
        });
    </script>

  <style>
     .swiper-container {
            width: 95%;
            height: 7rem;
            color: #fff;
            border-radius: .4rem;
        }

        .swiper-container img {
            width: 100%;
            height: 7rem;
        }

        /*包裹自定义分页器的div的位置等CSS样式*/
        .swiper-pagination-bullet {
            bottom: 5%;
            left: 0;
            width: 100%;
            height: 20px;
            /* background-color: red; */
            text-align: center;
        }

        /*自定义分页器的样式，这个你自己想要什么样子自己写*/
        .swiper-pagination-bullet {
            width: 12px;
            height: 4px;
            display: inline-block;
            background: #fff;
            opacity: .3;
            border-radius: 30%;
            margin: 0 5px;
            outline: 0;
        }

        /*自定义分页器激活时的样式表现*/
        .swiper-pagination-bullet-active {
            opacity: 1;
            /* border: 3px solid #f79131; */
            background-color: #5DD1B9 !important;
        }
    </style>

 <div class="swiper-container">
        <div class="swiper-wrapper">
            {volist name='config' id='vo'}
            <div class="swiper-slide">
                <img src="{$vo.image}" alt="">
            </div>
            {/volist}

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>