使用Swiper插件做轮播图

今天开始做轮播，但是用原生js来写特别麻烦，何况我是一名js小白。。。
实习的第一天，boss让我们实习生做公司的官网首页，而基础上所有的首页都是带自动轮播效果的，对我来说真是头大，因为刚学js不久。到下班了，还是没能写出来。看到和我一起的实习生写出了轮播效果，下班后我就问他，是怎么做到的，得到了插件的答案。

回家后上网上查找，看到了Swiper，于是我的第一个轮播图就做出来了（ps：这也是我的第一篇博客）。
话不多说，首先找到Swiper官网：https://www.swiper.com.cn/
然后获取Swiper，下载Swiper。
在教程里面有详细的使用方法。

1.下载Swiper后，进行解压。复制swiper-4.5.0\dist\css目录下的swiper.min.css文件和swiper-4.5.0\dist\js目录下的swiper.min.js文件粘贴到我们项目里的css和js目录下，然后在html里分别引用。

<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script type="text/javascript" src="js/swiper.min.js" ></script>

2.将以下内容复制到html中：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">轮播图片1</div>
        <div class="swiper-slide">轮播图片2</div>
        <div class="swiper-slide">轮播图片3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

3.给它设置大小

.swiper-container {
    高宽。。。
}  

4.还需要对Swiper进行初始化

window.onload = function() {
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal', // vertical垂直切换选项   horizontal横向切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
}

完成以上4步，就成功用Swiper做出了轮播图，是不是非常简单。
注：本文参考Swiper使用教程。