利用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，再修改内容（不能改类名和结构）；

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',
        },
      });
})