官方文档：https://www.swiper.com.cn/api/start/new.html
下载地址：https://www.swiper.com.cn/download/
步骤:
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
...
<script src="dist/js/swiper.min.js"></script>
...
</body>
</html>
2.HTML内容。
<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>
导航等组件可以放在container之外3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
} 4.初始化Swiper：最好是挨着</body>标签
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项（不设置默认是水平切换）
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script>
window.onload = function() {
...
}
</script>或者这样（Jquery和Zepto）(推荐)
<script>
$(document).ready(function () {
...
})
</script>5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
参数配置：
autoplay: true,//可选选项，自动滑动
initialSlide :2,//索引，默认从0开始，设置从第几张开始滑动（设定初始化时slide的索引）
direction : 'vertical',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical),默认水平。
speed:300,//切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
setWrapperSize :true,//开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
virtualTranslate : true,//使Swiper的滑动停止 ,Slide不会移动，但是Swiper还是在运行,可用来自定义滑动
a11y : {
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide',
firstSlideMessage: 'This is the first slide',
lastSlideMessage: 'This is the last slide',
paginationBulletMessage: 'Go to slide {{index}}',
notificationClass: 'swiper-notification',
}
//无障碍阅读。开启本参数为屏幕阅读器添加语音提示等信息，方便视觉障碍者
pagination: {
el: '.swiper-pagination',
},
uniqueNavElements: false,
//分页，默认为true时，仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了。
用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
html：
同方向的swiper嵌套例子，不要连续快速切换。
<div class="swiper-container" id="swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
slider1</div>
<div class="swiper-slide">
<div class="swiper-container" id="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:#ccc;">
2.1</div>
<div class="swiper-slide" style="background:#ccc;">
2.2</div>
<div class="swiper-slide" style="background:#ccc;">
2.3</div>
</div>
</div>
</div>
<div class="swiper-slide orange-slide">
slider3</div>
</div>
</div>
js：
<script>
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
resistanceRatio: 0,
})
</script>
包含的事件：
事件放在on里面：
var mySwiper = new Swiper('.swiper-container', {
on: {
slideChange: function () {//轮播事件
console.log(this.activeIndex);//slide的索引，属于哪一张
},
},
});
4411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
