Swiper：是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web 页面）
一:使用方法
Swiper 使用方法
1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
2.添加HTML内容。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。
<div class="swiper">
<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>
导航等组件可以放在Swiper容器之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper {
width: 600px;
height: 300px;
}
4.初始化Swiper。
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
如果作为CommonJs 或ES 模块引入
//CommonJs
var Swiper = require('swiper');
var mySwiper = new Swiper('.swiper', { /* ... */ });
//ES
import Swiper from 'swiper';
var mySwiper = new Swiper('.swiper', { /* ... */ });
Swiper 的结构和基础原理
Swiper 的每个展示块（屏）为一个slide，slide中放置图片或文字等展示的内容，全部slide排成一行(或多行)包含在包装器wrapper中，而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。
当手指（或鼠标）触摸滑动Swiper时，Swiper在浏览器每一帧通过计算滑动的距离差对wrapper进行位移（transform）从而产生拖动的效果。在手指（或鼠标）释放时，计算下一个slide的起始位置对wrapper设置位移动画（transition），从而产生切换动画效果。
二：下载组件：
下载后解压，然后会出现很多想的组件，选择你需要用到的引入到你写的文档中
三：看文档，复制代码
1.配置选项
自动轮播
autoplay: {
delay: 1000,//1秒切换一次
},
轮播方向
direction: 'horizontal',
是否循环
```
loop: true,
```
移入停止移出继续
```
var container = document.querySelector('.swiper-container')
container.onmouseenter = function(){
mySwiper.autoplay.stop();
}
container.onmouseleave = function(){
mySwiper.autoplay.start();
}
```
