实用型插件-swiper

swiper纯js插件：主要是面对移动端的触屏滑动；但是，在pc端也可以实现滑动轮播；

下面简单介绍一下swiper的用法：

1：首先加载插件，需要用到swiper.min.js和swiper.min.css：

两种情况：

如果html文档中引入了jquery，就可以用轻量的swiper.jquery.min.js

2：准备好插件，我们要处理html部分；

蓝色箭头为主容器：控制整个容器的样式；

红色箭头图片或者内容容器：控制图片容器的样式：

相应swiper-wrapper下为每个swiper-slide为：图片或者内容；

黑色为：分页器；

黄色为：左右切换按钮；

紫色为：滚动条；

以上分页器，左右按钮，滚动条根据需要添加；

3：处理js部分：

js部分最好放在body底部

或者嵌套在

document.read(function(){

});

根据不同颜色的箭头相应的英文可以知道：

direction控制水平或者垂直；

loop控制是否循环；

pagination控制分页；

两个button控制左右切换；

scollbar控制滚动条；

3：js部分写完后可以在自行更改下每个图片和内容部分，可以得到：以下展示；