<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/swiper.min.css">
<style>
//给轮播图的容器定义一个样式
.swiper-container{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">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>
</body>
<script src="./js/swiper.min.js"></script>
<script>
// 初始化一个Swiper实例，给当前的Swiper实例添加配置项
var mySwiper = new Swiper('.swiper-container', {
initialSlide:0,
direction: 'horizontal',
loop: true,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// 分页器 也就是一个个的小点
pagination: {
el: '.swiper-pagination',
},
centeredSlides : true,
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView : 3,
spaceBetween : 20,
slidesOffsetBefore:80,
})
</script>
</html>
（1） initialSlide:0,类型：number ；设定初始化时slide的索引，也就是对应索引的swiper-slide添加active属性；
（2）direction：Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)；也就是水平轮播或垂直轮播；
（3）speed:1000,切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。也就是一张轮播图开始轮播的时刻到结束轮播的时刻所用的时间；
（4）grabCursor:true,设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）；
（5）loop: true, 循环模式选项 true 或者false，设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
（6）disableOnInteraction ：用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。
也就是默认为 true：这种情况 我们操作过轮播图之后，比如鼠标移入，点击左右切换按钮，轮播图会停止自动轮播；
设置为false后，无论我们怎么操作，当时会停止自动轮播，操作完成后，会自动开启轮播；
（7）autoplay: {
delay: 9000,//自动切换的时间间隔，单位ms
},
（8）spaceBetween ：轮播图之间的间隔；
（9）slidesPerView ：设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto'目前还不支持多行模式（当slidesPerColumn > 1）
（10）loopedSlides：在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。简单点就是每次几张图一起轮播；
