引用
这是我自己边学习边整理的swiper插件的部分配置选项，都是基本的，附上了自己的注释，应该可以看得懂的，不懂就Q我（1035040092）他这个插件有中文文档，http://www.swiper.com.cn/api/start/2014/1218/140.html，自己登陆也能看，他这个完整的我从头看到尾，说实话并不是很易懂，我是秉着会用就行的原则，精通也没时间研究，以下是个人整理，可能有些地方理解不到位，请多包涵，帮忙指出，着重说一点当你登录那个网址看到回电函数以下的时候，坚持看下去，虽然很无聊很简单，相信很多人可以用到，以下代码仅供学习,下面有完整的包,就这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
<style>
.swiper-container {
width: ;
height: 490px;
}
.swiper-wrapper{
/*transition-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1)*/
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background: orange;" data-hash="slid1"data-history="mamaipi">Slide 1
<img src="img/z404.jpg" class="data-lazy" />
</div>
<div class="swiper-slide" style="background: orangered;height:490px" data-hash="slid2" data-history="mamaipi2">slider 2
<div style="width: 50%;margin: 0 auto;padding: 0;position: relative;">
<img src="img/z423.jpg" style="width: 100%;" />
<div style="width: 100%;height: 60px;position: absolute;bottom: 0;background: black;opacity: 0.7;">
</div>
</div>
</div>
<div class="swiper-slide" style="background: yellow;" data-hash="slid3"data-history="mamaipi3">
<div class="swiper-zoom-container"> <img src="img/z423.jpg"></div>
<!-- <div class="swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width: 100%;background: pink;">3-1</div>
<div class="swiper-slide" style="width: 100%;background: deeppink;">3-2</div>
<div class="swiper-slide" style="width: 100%;background: hotpink;">3-3</div>
</div>-->
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container',{
//举例为上下滑动，默认为horizontal(水平滑动)
loop : true,//默认false true为最后一张无缝过渡到第一张 ********这个属性放到最前面1或2的位置 较靠后的位置报错，就试了几个你们可以测测 ,
//initialSlide : 1,//索引值 打开后第一次显示的界面 0为默认的第一个界面。以此类推
speed : 2000,//滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
autoplay : 1000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。也可在某个div上单独设置停留时间<div class="swiper-slide" data-swiper-autoplay="2000"></div>
//autoplayDisableOnInteraction : true,//用户操作swiper之后是否会停止自动切换,默认true(停止) false(无视用户操作依旧按照自动切换的时间间隔进行切换)*********跟上面的loop冲突,建议保留loop即可，因为这个的默认属性符合用户操作,所以不用写
grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。默认 false *****与autoplay冲突 (二选其一，视情况舍去)
//parallax : true,//视差效果 这个没做 参照网上swiper的API文档就ok
hashnav : true,//每个slide 记得加一个data-hash属性 页面效果不改变 改变的是URL 比如加之前是...index.html 加上之后变成index.html#slid1或2或3
//hashnavWatchState:true,//开启后当URL的锚链接发生变化时控制slide切换（hashnav也要在开启状态）。URL控制slide的切换 ******** hashnav这个必须加上
//history : 'lovve',//这个必须放服务器里面 本地的就可以, 地址全部手写会报错(比如127.0.0.1/文件夹名/index.html/lovve/mamaipi3),刷新也会报错 你只能写 127.0.0.1/文件夹名/index.html,手动切换或者自动切换才会改变地址,感觉就是弄个复杂一点的假地址 没多大卵用(当然这是我的看法，关于刷新的问题中文网api有一个2bi给了个解释“需要预先设定好同样内容的页面”,我只想说那是个装逼犯，从头到尾都有它的解答，仔细看日期还不是说边学边装逼从头装到尾，是他妈不分时间几乎每天都来，写到这忍不住就骂他 草)
//replaceState:true,//跟hashave相同
//setWrapperSize :true,//不知道这个有啥用 百度没找到 你们可以找找
//virtualTranslate : true,//个人感觉没用 没必要看
//height : window.innerHeight //全屏高度没测出来 css高度我去掉了
//roundLengths :true,//默认false 将slide的宽四舍五入 比如 你一个层宽是75% 屏幕分辨率*75% 恰好有小数 那就四舍五入 具体用处我举一例，我遇到过:仅供参考(我有一个百分比宽和不设置高的层 里面放了一个style为100%的图片 就是图片响应，再在图片的同级做一个100%宽 10%高 0.8的黑透层 上面是图片的说明，position:absolute;bottom:0;这么写是ok的，确实定位在了图片上 层的最下面，但是随着放大缩小屏幕由于宽是百分比，高也是随着图片高变的，图片的高会出现小数 但是外面的层的高不会出现小数 会舍去 这样就冲突了子元素比父级还大0.几像素，那么那个黑透的bottom就不是0了 是0.几，就会在下面留白边。看不明白手痒的你们亲测吧。本文亲测感觉没卵用的，以上举例是我做项目是遇到的 可能是我的bug,但是还是拿出来分享一下)
//autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化,也是没啥用 顺便整理了
pagination : '.swiper-pagination',//几个slide几个小圆点
//paginationType : 'progress',
paginationClickable :true,//上面的小圆点点击可跳转
prevButton:'.swiper-button-prev',//左按钮
nextButton:'.swiper-button-next',//右按钮
scrollbar:'.swiper-scrollbar',//设置滚动条
scrollbarHide:false,//滚动条不隐藏 默认是true隐藏
scrollbarDraggable : true ,//允许拖动滚动条 默认false
scrollbarSnapOnRelease : true ,//释放滚动条自动贴合
keyboardControl : true,//设置为true时，能使用键盘方向键控制slide滑动。
//mousewheelForceToAxis : true,//与下一个放一起使用 鼠标滑轮控制slide垂直方向的滑动 记得设置滚屏方向为垂直
mousewheelControl : true,
mousewheelReleaseOnEdges : true,//与上一个放一起用 鼠标滑轮控制左右方向的滑动
//lazyLoading : true,//设为true开启图片延迟加载 img标签要加一个class="data-lazy"
//lazyLoadingInPrevNext : true,//设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide
lazyLoadingOnTransitionStart : true,//默认false当过渡到slide后开始加载图片，如果你想在过渡一开始就加载，设置为true
zoom:true,//点击图片放大 例子在slide3 <div class="swiper-zoom-container"> <img src="path/to/image"> </div>
zoomToggle :false,//设置为false，不允许双击缩放，只允许手机端触摸缩放。
})
</script>
</body>
</html>