标签：4.0 ## 基础 -- html swiper ###
/swiper笔记
# Swiper.md
## 介绍
Swiper是一款前端制作轮播图的插件
## 安装
### CDN
可以进入https://www.swiper.com.cn/cdn/index.html 直接复制，一般使用`4.0.1`版本，复制下面两行，并且修改版本号即可。
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>
将版本号改为`4.0.1`，不能用`4.0.0`，有bug。
### 安装到本地
将cdn的路径直接复制到浏览器打开，保存到本地，可行但太low，不适合我们高端人才。
使用npm
shell
npm init -y
npm i [email protected]
## 引入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
</body>
</html>
如上，即可将swiper引入到我们的项目中。
## 使用
### 初始化
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper"><!--这个名字要改成swiper-container-->
<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', {//这个名字要改成swiper-container
autoplay: true,//可选选项，自动滑动
})
</script>
</body>
</html>
> 注意：由于我们使用的swiper4，最外层class名要改为`swiper-container`，下面的js也要改
## 配置
接下来就可以按照swiper官方文档，根据自己的需求，个性化定制你的专属swiper了
### pagination分页器
不要忘记html标签也要复制，注意粘贴位置
### navigation前进后退按钮
注意html标签也要复制，注意粘贴位置
## 多个轮播图
查看autoplay介绍文字
标签：4.0,
##,
基础,
--,
html,
swiper,
###
From： https://www.cnblogs.com/wxy0039/p/17516965.html