swiper轮播图

引入css，js

 <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

 <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" />

html内容

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://www.swiper.com.cn/templets/default/images/home/iphoneX.png" class="topbox">
            </div>
            <div class="swiper-slide">
                <img src=" https://www.swiper.com.cn/templets/default/images/home/iphone8.png" class="topbox">
            </div>
            <div class="swiper-slide">
                <img src="https://www.swiper.com.cn/templets/default/images/home/ipad.png" class="topbox">
            </div>
        </div>
    </div>
    <div class="page">
        <div class="pagination"></div>
    </div>

 

js内容

var mySwiper = new Swiper('.swiper-container', {
    loop: true, //环路
    direction: 'horizontal', // 横向切换
    autoplay: { //自动切换
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.pagination',
        type: 'fraction',
    },
});

 

 

Swiper4.x使用方法

 

来源：https://blog.csdn.net/xxwd12/article/details/99307426