怎么使用swiper快速实现轮播图?方法在这里!

首先引入框架js和css代码

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

书写css代码

   .swiper-container {
        width: 100%;
        height: 150px;
    }

    .swiper-slide {
        width: 100%;
        height: 150px;
    }

    .swiper-slide img {
        width: 100%;
        height: 100%;
    }

然后写html代码

   <div class="yupao-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                {volist name="$banner" id="vo"}
                <div class="swiper-slide"><img src="{$vo.filepath}"/>
                </div>
                {/volist}
            </div>
            {volist name="$banner" id="vo"}
            <div class="swiper-pagination"></div>
            {/volist}
        </div>
    </div>

最后动起来需要js代码

    <script>
        var mySwiper = new Swiper(".swiper-container", {
            autoplay: 1000,
            effect: "flip",//翻转效果
            loop: true,
            // 如果需要分页器
            pagination:{
                el:'.swiper-pagination',
                clickable:true,
            },//这样写小圆点就有了
            // 如果需要滚动条
            scrollbar: '.swiper-scrollbar',
        })
    </script>

这样就可以滑动了