关于Swiper
Swiper是一款开源、免费、强大的触摸滑动插件，常用于移动端网站的内容触摸滑动，Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
如何使用Swiper
步骤1：调用所需文件
1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
...
<script src="dist/js/swiper-bundle.min.js"></script>步骤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
<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>
