开发者学堂课程【移动 Web 前端开发：swiper 使用（轮播图）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8505
swiper 使用（轮播图）
内容介绍
一、swiper 使用方法
二、案例功能的完善
一、swiper 使用方法
首先拷贝一份之前用 zepto 模块完成的 index 轮播图，命名为 index-swiper.html，拷贝过来后将 cript> 中的 js/index.js 拿掉，就在 cript> 中使用 index 而不在 js 中使用 index，因为属于 js 里面的而不属于 index.swiper 里面的，将 div class 中 sn_sav 去掉使轮播图不生效，此时的轮播图不受 js 的影响，在此基础上开始使用 swiper 方法制作轮播图。下面开始了解 swiper。
swiper 插件功能：
自适应/全屏，垂直方向+自适应/全屏，视差效果，渐变效果，3D方块效果，3D覆盖流效果，3D 翻转效果，在 Slides 之间产生间隙，分组显示 /Carousel ,自动分组 /Carousel,Slides 居中+自动分组，Free 模式/不自动贴合，多行 Slides 分布，Swipers 嵌套，滚动条，抓光标，控制按钮等很多，还有移动端的和 PC 端的。也就是说轮播图有很多不同的实现方式，在官网上打开中文教程里有 Swiper 的使用方法，点开下载 Swiper，里面有很多 Swiper 的源文件，可以点击下载。关于Swiper 的使用方如下。
1. 首先加载插件,需要用到的文件有 swiper.min.js 和 swiper.min.css 文件，
可通过 Swiper 官网下载，下载后打开 dist，dist 里面有 css 和 js，先打开 css，其中 swiper.min.css 是压缩文件，
swiper.css 是未压缩文件，再打开 js 文件夹，js中只要掌握两个区块，一个是swiper.min.js 和 swiper.js，
一个是 swiper.jquery.js 和 swiper. jquery.min.js，这两个区块本质的区别就是一个带 jquery 一个不带 jquery。如果页面加载了 jQuery.js 或者 zepto.js ,
可以选择使用更轻便的 swiper.jquery.min.js，就是说 swiper.jquery.min.js 依赖于jQuery.js 或者 zepto.js ，如果不想依赖于他们就要用不带 jquery 的 swiper.js，带jquery 的要依赖于 jquery ，不带 jquery 就不用管，内部已经实现了 jquery 相关功能，只要使用这个插件就好，
这里有 zepto 支持所以选择带有 jquery 的 js，并且在第三方资源下新建 swiper 库分别导入 css 和 js，
在 index-swiper.html 中引入 swiper.min.js 和 swiper . jquery.js 代码为：
<linkrel=”stylesheet” href=”assets/swiper/css/swiper.min.css”/>
<script src=”assets/less/less.min.js”></script>
</head>
…
<script src="assets/zepto/touch.js"></script>
<script src="assets/swiper/js/ swiper . jquery.js"></script>
…
2.HTML 内容
写 Bootstrap 时都要按照 Bootstrap 的结构来写主键，那么使用这样的主键也要按着约束来。
对于轮播图分析 container 是大容器，wrapper 是轮播图片容器，里面则是图片，pagination 则是分页器，prev 和 next 是左右两边的导航按钮，scrollbar 是滚动条内容如下：
<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、轮播图构架
现在观察需要制作轮播图的结构为大容器，图片容器指示器，这里回到index中将将大容器名命名为 swiper-container，图片容器为 swiper-wrapper，swiper-slide 代表要轮转的容器，很多个连在一块进行轮播，相对结构对于而言 li 就是 slide，swiper-pagination 代表分页器，index 内容增加如下：
<!-轮播图-->
<div class=" swiper- container">
<ul class="swiper-wrapper">
<li class=" swiper-slide"><a href="#"><img src="images/banner01.jpg” alt=""/></li>
<li class=" swiper-slide"><a href="#"><img src="images/banner02.jpg” alt=""/></li>
…
</ul>
<ul class-"swiper-pagination'">
<li class=”now”></li>
<li></li>
<li></li>
…
</ul>
4. 可以给 Swiper 定义一个大小,当然不要也行，这里没必要定大小，与 window一样大即可，不用固定死。
5.初始化 Swiper :最好是挨着 /body> 标签
index-swiper.html 中初始化轮播图，使用 function 文档加载完成，初始化大容器. swiper- container，此时没有传任何参数，只是初始化轮播容器，代码如下：
…
<script>
$(function(){
/*初始化轮播图/
new Swiper( ' . swiper- container’ );
})
</script>
…
运行一遍代码效果如下：
发现已经具备滚动效果，只是样式 Swiper 并没有做。这时候需要增加样式，首先去掉 container 的列表标记，然后图片宽度过大，应该和列表宽度一样宽，设置所有的 img 为 block，宽度为 100%，所以 index-swiper 中设置图片大小如下：
…
<style>
. swiper-container ul{
list-style: none;
}
.swiper- container img{
display: block;
width: 100%;
}
</style>
…
运行效果为：
要实现滑动切换只要写一句初始化的代码，实现机制是 Swiper 里面有的，这里当作工具来用。
二、功能的进一步完善
上面轮播图只是完成了滚动效果，在浏览器运行后可发现还有页面功能不全，还需要显示自动轮播，无缝滑动，此时是划到最后一张图片划不动了，显示指示器功能，所以要在 index-swiper 中完成以下功能代码块，而要实现这三个功能只要实现参数配置就好了，需要查看 API 文档配置，。找到 Swiper，打开 api 文档，点开swiper 初始化可在内找到 swiper 的配置选项，方法，函数：
autoplay：自动切换的时间间隔(单位 ms )。不设定该参数 slide 不会自动切换。
loop：设置为 true 则开启 Ioop 模式。loop 模式:会在原本 slide 前后复制若干个 slide 并在合适的时候切换,让 Swiper 看起来是循环的。loop 模式在与 free 模式同用时会产生抖动。因为 free 模式下没有复制 slide 的时间点。
pagination：分页器容参的 css 选择器或 HTML 标签。分页器等组件可以置于 container 之外，不同 Swiper 的组件应该有所区分，如#pagination1,#agination2，就是说这个指示器可以通过选择器来指定他，比如有一个轮播图，而他的指示器可以在轮播图之外，在轮播图外要去选择到他和指定他。
autoplayDisableOnInteraction：用户操作 swiper 之后，是否禁止 autoplay，默认为true，如果设置为flase，用户操作后自动切换不会停止，每次都会重新启动autoplay，
参数为 autoplayDisableOnInteraction。
所以这里要设置 autoplay 自动轮播时间为1秒，loop 分页器默认是 flase，这里改为 true 则为滑动，打开浏览器 style 中可看到原来有八张图，变成环路后，就默认首位各加一张，就是十张图，原理和上面一样，只是封装了下。
配置 pagination 选择器默认是空，这里 pagination 应该指向选择器为 swiper-pagination。再次运行会发现运行界面中鼠标滑动一下背景图就不自动滚动了，是因为 autoplay 中定义用户操作后 autoplay 停止轮播，
如果想要再次轮播起来要参考配置 autoplayDisableOnInteraction，所以index.html 中优化代码如下：
……
<script>
$(function(){
/*初始化轮播图*/
new Swiper( ' .swiper- container' ,{
/*1.自动轮播*/
autoplay: 1000,
/*2.无缝滑动*/
loop :true,
/*3.显示指示器*/
pagination: ' . swiper-pagination ' ,
/*4.用户操作后再次轮播*/
autoplayDisableOnInteraction:false
});
})
</script>
……
最后效果为自动轮播，如图：
