利用swiper插件快速写轮播图

一、引入
1、下载swiper插件：https://www.swiper.com.cn/；
2、在dist里面把swiper.min.js和swiper.min.css分别放入文件夹中；
3、在html中引入swiper的js和css文件；

二、按照语法规范使用
1、打开demos里面对应的html，复制swiper的代码到index.html，再修改内容（不能改类名和结构）；

            <!-- 滑动图start -->
        <div class="slider">
            <!-- Swiper 注意不要更改里面的类名和结构-->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./upload/banner.dpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/banner1.dpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/banner2.dpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/banner3.dpg" alt="">
                    </div>
                </div>
                    <!-- Add Pagination 页码 小圆点 不能落下-->
            <div class="swiper-pagination"></div>
            </div>
        </div>
            <!-- 滑动图end -->

2、把demos里的样式复制到index.css里面；

/* 复制swiper的css 样式 */
.swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

3、复制JS到index.js里面；

window.addEventListener('load',function(){
    var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
      });
})