Swiper 插件
官方地址：https://www.swiper.com.cn/
使用教程
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内容。
<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
<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>
5）完成。恭喜你，现在你的Swiper应该已经能正常切换了
二 修改参数
1）修改js
查阅官方手册 https://www.swiper.com.cn/api/index.html
2）修改css
//1 在Chrome里找到要修改的属性名
//2 在自己的css中重新定义 覆盖掉默认的
//3 加上 important 保证自己的样式权重最高
三 移动端常见插件
superslide： http://www.superslide2.com/ iscroll： https://github.com/cubiq/iscroll
四 插件使用总结
1. 确认插件实现的功能 2. 去官网查看使用说明 3. 下载插件 4. 打开demo实例文件，查看需要引入的相关文件，并且引入 5. 复制demo实例文件中的结构html，样式css以及js代码
