轮播图（swiper）

JS插件

简单说就是别人写好封装好的代码，我们可以直接拿过来用的。之前我们写的代码都是用纯js也就是原生js写的，使用js插件来实现一些常见的功能块，是很快就能实现的，同时还缩减了我们的代码量。

\1. 要想使用这个插件，首先得去官网下载需要得材料。swiper插件官方地址：https://www.swiper.com.cn/api/start/new.html。

\2. 下载完毕后，新建项目，把最基础的两个文件引入到页面中

（使用node.js时在cmd命令中下载所需要的版本）

\3. 引入之后，使用插件

js插件实现轮播图

第一：引入css文件和js文件。(我放入了自己的文件夹内，也可找到文件夹位置直接引入)

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

第二：在swiper官网找到轮播图HTML的代码

 

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper', {
    autoplay: true,//可选选项，自动滑动
})
​
//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper')
var mySwiper = document.querySelector('.swiper').swiper
mySwiper.slideNext();
</script>

第三：选择自己想要的内容

前进后退按钮、分页器等在swiper官网都能找到代码