用Swiper实现轮播图

首先使用npm将Swiper进行加载，引入时需要用到swiper-bundle.min.js和swiper-bundle.min.css文件

    <link rel="stylesheet" href="/bbb/swiper/dist/css/swiper.css">　　//bbb是根目录和后端进行交互所进行更改的原文件夹为node_modules

HTML 代码如下：

<div class="swiper-container" style="width: 100%;height: 400px ;position: absolute">
    <div class="swiper-wrapper" style="width: 100%;height: 400px ">
        <div class="swiper-slide" id="swiper1" style="width: 1900px;height: 400px"><img src="/aaa/img/4.jpg" alt="style="position: center;width: 100%;height: 400px"></div>
        <div class="swiper-slide" id="swiper2" style="width: 1900px;height: 400px"><img src="/aaa/img/1.jpg" alt=""style="position: center;width: 100%;height: 400px"></div>
        <div class="swiper-slide" id="swiper3" style="width: 1900px;height: 400px"><img src="/aaa/img/3.jpg" alt="" style="position: center;width: 100%;height: 400px"></div>
        <div class="swiper-slide" id="swiper4" style="width: 1900px;height: 400px"><img src="/aaa/img/2.jpg" alt=""style="position: center;width: 100%;height: 400px"></div>
    </div>
    <div class="swiper-pagination">
    </div>
</div>

本次制作的轮播图样式为下方可点击选择的图片，且可以用鼠标拖拽图片进行切换图片（图片下方的蓝色圆点)

 

js代码如下：

 var mySwiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
    //自动播放图片
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })
    //鼠标滑过pagination控制swiper切换
    for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
        mySwiper.pagination.bullets[i].onclick = function () {
            this.click();
        };
    }