swiper (轮播图) 插件的使用

中文官网
https://www.swiper.com.cn/api/autoplay/19.html
1.首先引入文件

 <link rel="stylesheet" href="./swiper-4.4.1/dist/css/swiper.min.css">
  <script src="./swiper-4.4.1/dist/js/swiper.min.js"></script>

2.html结构

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="javascript:">
                    <img src="./images/l1.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:">
                    <img src="./images/l2.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:">
                    <img src="./images/l3.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:">
                    <img src="./images/l4.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:">
                    <img src="./images/l5.jpg" alt="">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:">
                    <img src="./images/l6.jpg" alt="">
                </a>
            </div>
        </div>

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

3.js代码

<script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项

            loop: true, // 循环模式选项
            // 如果需要前进后退按钮
            //控制左右按钮
            navigation: {
                nextEl: '.swiper-button-next',//对应左边按钮类名
                prevEl: '.swiper-button-prev',//对应右边按钮类名
            },
            //自动轮播
            autoplay: {
                delay: 3000, //控制时间
                disableOnInteraction: true,
                disableOnInteraction: false,
            },
            effect: 'coverflow',  //控制翻滚动效
            pagination: {
                el: '.swiper-pagination',  //点标记
                dynamicBullets: true,
                dynamicMainBullets: 2
            },
        })        
    </script>