Swiper学习笔记（二） - 简书
Swiper学习笔记（二）
一、swiper初始化中使用的parameters
1.initialSlide——用来设定页面加载完成时，第几张图片先显示出来
0表示第1张
1表示第2张 2表示第3张
。。。以此类推
2.direction——设置slide的滑动方向
horizontal
3.speed——滑动速度，即slide滑动开始到结束所用的时间（从左到右所用的时间）
取值举例:500
4.autoplay——自动切换的时间间隔，不设定该参数，slide不会自动切换
取值举例：2000 单位 ms
5.autoplayDisableOnInteraction——用户操作swiper之后是否禁止autoplay
不会停止，但是会重新启动autoplay
6.autoplay
如果设置为ture，当切换到最后一个slide时停止自动切换（loop模式下无效）
7.grabCursor
鼠标覆盖Swriper时指针会变成手掌状，拖动时指针会变成抓手形状（根据浏览器有所不同）
8.autoHeight——自动高度
wrapper和container会随着当前slider的高度而发生变化
用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
请将子swiper的nested设置为ture
由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效
二、free Mode(free模式/抵抗反弹)
1.freeMode
普通模式：slide滑动时只滑动一格，并自动贴合wrapper
free模式：slide会根据惯性滑动且不会自动贴合
2.freeModeMomentum——free模式动量
关闭动量，释放slide之后立即停止不会滑动
3.freeModeMomentumRatio——free模式动量值（移动惯量）
值为number类型，当设置的值越大，释放slide时滑动的距离越大。
4.freeModeMomentumBounce——动量反弹。
禁用free模式下的动量反弹，slide通过惯性滑动到边缘时，无反弹效果
默认值，有反弹效果
5.freeModeMomentumBounceRatio——动量反弹的动量值
值越大，产生的边界反弹效果越明显，反弹距离越大。
6.freeModeSticky
使得freeMode也能自动贴合
false 默认值
三、slides grid(网格分布)
1.centeredSlides
活动快居中
活动块居左，默认值
2.slidesPreView
设置slider容器能够同时显示的slides数量（carousel模式）
可以设置为number或者
根据slides的宽度来设定数量
loop模式下，如果设置为auto，还需设置另外一个参数 loopedSlides
3.slidesPerGroup
在carousel mode下定义slides的数量多少为一组。
4.slideBetween
设置slide之间的距离（单位 px）
5.slidesPerColumn
多行布局里面没列的slide数量
6.slidesPerColumnFill
多行布局中以什么形式填充：
'column'(列)
7.slidesOffsetBefore
设置slide与左边框预设偏移量（单位 px）
举例： 100
8.slidesOffsetAfter
设置slide与右边框的预设偏移量（单位 px）
四、Effects(切换效果)
1.effect——slide的切换效果
"slide"——位移切换（默认）
"fade"——淡入
"cube"——方块
"coverflow"——3d流
"flip"——3d翻转
2.fade——fade效果参数。可选参数：crossFade(3.03启用)
false(默认)——关闭淡出。过渡时，源slide透明度为1（不淡出），过度中的slide透明度从0-&1（淡入），其他slide透明度为0。
ture(可选值)——开启淡出。过渡时，源slide透明度从1-&0(淡出)，过渡中的slide透明度从0-&1（淡入），其他slide透明度为0。
effect:'fade',
crossFade:false
3.cube——效果参数，可选值：
slideShadows——开启slide阴影。默认ture。
shadow——开启投影。默认ture。
shadowOffset——投影距离。默认20，单位px。
shadowScale投影缩放比例。默认0.94
effect : 'cube',
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
4.coverflow——cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：
rotate：slide做3d旋转时Y轴的旋转角度。默认50。
stretch：每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
depth：slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
modifier：depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
slideShadows：开启slide阴影。默认 true。
5.flip——共有两个参数可设置：
slideShadows：slides的阴影。默认true。
limitRotation：限制最大旋转角度为180度，默认true。
五、Clicks(点击)
1.preventClicks
true（默认）——当swiping时组织意外的链接点击。
2.preventClicksPropagation——阻止click冒泡，拖动Swiper时组织click事件。
true(默认)
3.slideToClickedSlide
true——swiping时点击slide会过度到这个slide
false（默认）
六、Touches(触发条件)
1.touchRatio——触摸距离与slide滑动距离的比率
类型：number
应用实例：利用tuchRatio制作与拖动方向相反的swiper——通过负数
2.simulateTouch
true（默认）——swiper接受鼠标点击、拖动。
3.onlyExternal
true——slide无法拖动，只能使用扩展API函数，例如slideNext()或slidePrev()或slideTo()等改变slides滑动
false（默认）
4.followFinger
true（默认）
false——拖动slide时它不会动，当释放slide才会切换
5.shortSwopes
true（默认）
false——惊醒快速短距离的拖动无法触发swiper
6.longSwipesRatio——进行longSwipes时触发swiper所需要的最小拖动距离比例，即定义longSwipes距离比例。值越大swiper所需距离越大。最大值0.5
7.threshold——拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。
8.touchAngle——允许触发拖动的角度值。默认45度，即使触摸方向不是完全水平也能拖动slide。
9.longSwipes
true（默认）
false——进行长时间长距离的拖动无法触发Swiper。
10.longSwipesMs——定义longSwipes的时间（单位ms），超过则属于longSwipes。
11.touchMoveStopPropagation
true（默认）——阻止touchmove冒泡事件。
12.resistance——边缘抵抗。当swiper已经处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。边缘抵抗就是拖离边界时的抵抗力。
false——禁用，将slide拖离边缘时完全没有抗力。
true（默认），将slide脱离边缘时有抗力，可以通过resistanceRatio设定抵抗力大小。
13.resistanceRatio——抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。
14.iOSEdgeSwipeDetection
true——开启IOS的UIWebView环境下的边缘探测。如果拖动是从屏幕边缘开始则不触发swiper。
false（默认）
15.iOSEdgeSwipeThreshold——IOS的UIWebView环境下的边缘探测距离。如果拖动小于边缘探测距离则不触发swiper。
类型：number
正在奋力奔跑的前端小白，喜欢文字、“民摇”、户外。希望能和大家一起交流。。。下次自动登录
现在的位置:
& 综合 & 正文
出色的html滑动效果库 swiper -例子5 横向自由滑动
可以滑动部分
可以用于div滑动，图片滑动等切换
例子代码以及所需资源：http://download.csdn.net/detail/feisy/6638105
官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示 http://www.idangero.us/sliders/swiper/demos.php
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Demo&/title&
&link rel="stylesheet" href="css/idangerous.swiper.css"&
/* Demo Styles */
margin: 0;
font-family: Arial, Helvetica, sans-
font-size: 13
line-height: 1.5;
.swiper-container {
width: 640
height: 250
text-align:
.red-slide {
background: #ca4040;
.blue-slide {
background: #4390
.orange-slide {
background: #ff8604;
.green-slide {
background: #49a430;
.pink-slide {
background: #973e76;
.swiper-slide .title {
font-style:
font-size: 42
margin-top: 80
margin-bottom: 0;
line-height: 45
.swiper-slide p {
font-style:
font-size: 25
.pagination {
z-index: 20;
bottom: 10
.swiper-pagination-switch {
display: inline-
border-radius: 8
background: #555;
margin-right: 5
opacity: 0.8;
border: 1px solid #
.swiper-active-switch {
background: #
&div class="swiper-container"&
&div class="swiper-wrapper"&
&div class="swiper-slide red-slide"&
&div class="title"&Free Mode&/div&
&p&has no fixed positions&/p&
&div class="swiper-slide blue-slide"&
&div class="title"&Fluid-Mode Enabled&/div&
&p&When you release the slide, it keep moving for a while&/p&
&div class="swiper-slide orange-slide"&
&div class="title"&Slide 3&/div&
&p&Keep swiping&/p&
&div class="swiper-slide green-slide"&
&div class="title"&Slide 4&/div&
&p&Keep swiping&/p&
&div class="swiper-slide pink-slide"&
&div class="title"&Slide 5&/div&
&p&The last one&/p&
&div class="pagination"&&/div&
&script src="js/jquery-1.10.1.min.js"&&/script&
&script src="js/idangerous.swiper-2.1.min.js"&&/script&
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
freeMode: true,
freeModeFluid: true
&&&&推荐文章:
【上篇】【下篇】Swiper 学习心得_博客园
当前位置： >
>Swiper 学习心得
Swiper 学习心得
& 作者：vvy_404 & 来源： 博客园-vvy-404 &
&& swiper的结构为：
1.direction：滑动方向 默认为horizontal（水平），可以设置为vertical（垂直，但在某些浏览器不好使）。
2.speed：从滑动开始到滑动结束的时间，注意autoplay指的是间隔多久开始滑动。
3.autoplay：如果用户操作后autoplay停止，参考基本选项&
4.autoplayDisableOnInteraction:用户操作swiper之后，是否禁止
。默认为true：停止。
5.grabCursor：设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）。
6.parallax：滑动与其父元素之间的移动距离的关系。
7.ally：加提示信息。
8.width、height：会使自适应失效。
freeMode：（freemode/反弹模式）
1.freeMode：滑动不会按照块滑，根据滑动的力度而改变位置。
2.freeModeMomentum：会出现类似卡了的效果。
3.freeModeMomentumRatio：free模式动量值（移动惯量）。设置的值越大，当释放slide时的滑动距离越大。
Slides grid（网格分布）
用于设定slider块居中（centeredSlides），或者几块为一组（slidesPerGroup），各个Slide之间的距离（spaceBetween），多行布局里的Slide的数量（slidesPerColumn），多行布局以什么形式填充（slidesPerColumnFill）
Effects（切换效果）
effect：slide的切换效果，可以设置为fade（淡入），cube（方块），coverflow（3d流）
Clicks（点击）
swiping时点击出现各种阻止情况
Touches(触发swip的条件)
1.touchRatio 触摸距离与实际滑动的关系。
2.onlyExternal：值为true时，slide无法拖动，只能使用扩展API函数例如
等改变slides滑动。
3.followFinger：如设置为false，拖动slide时它不会动，当你释放时slide才会切换。
4.设置为false时，进此文来自: 马开东博客
转载请注明出处 网址：
行快速短距离的拖动无法触发Swiper。
5.threshold:拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。
Swiping/No swiping（禁止切换）
可以设置禁止滑动到下一个（前一个），或者设定滑动的区域。
* pagination 分页器
paginationClickable、 paginationBulletRender（设置索引）、paginationHide
* Navigation Buttons(前进后退按钮)
nextButtom &PrevButtom
* Scollbar（滚动条）
scrollbarHide
keyboard/mousewheel(鼠标、键盘控制选项)
Callbacks（回调函数）
相关阅读：
来源：（微信/QQ：,微信公众号：makaidong-com） &&&&&& 欢迎分享本文，转载请保留出处！
&&&&&& 【原文阅读】:
上一篇：没有了
【相关文章】
每日最新文章
每日最热文章
本周最热文章
本月最热文章
本年最热文章
Powered by
Copyright &
, All Rights Reserved从一个页面跳转到用swiper写的全屏滚动页面的指定位置问题背景
从一个页面跳转到用swiper写的全屏滚动页面的指定位置，怎么实现啊？
我没有自己写一个全屏滚动，就在找了若有侵权请留言告知我更换
首先把案例拿到本地命名为SwiperPC.html。（CV大法就不需要教了吧？）
现在要写一个页面a.html代码如下：&a class="btn" href="SwiperPC.html" target="_blank"&点击我进入全屏页面效果展示&/a&通过点击a标签跳转到SwiperPC.html指定某个slide位置（例如 索引值为1的slide）
正在思考怎么用slideTo结合回调函数...某位大神提供了一个思路：用本地存储于是我就开始的百度本地存储找到了 豁然开朗！
第一步、 a.html中设置localStorage本地存储
添加点击事件，设置 localStorage自定义 属性 localIndex
注意这里的index类型是string&a class="btn" href="SwiperPC.html" target="_blank"&点击我进入全屏页面效果展示&/a&
&script src="/jquery/3.2.1/jquery.min.js"&&/script&
$(function () {
$('.btn').click(function () {
/* 存储名字为 localIndex , 值为 1 的变量 如下两种方法 */
localStorage.localIndex = 1;
// localStorage.setItem("localIndex","1"); // 注意这里的index类型是string 所以不能直接加法运算,稍后处理时候要转为number类型
第二步、修改案例中的 pcpage.js
设定初始化时slide的索引
initialSlide: index
设定 初始index
var index=0;
localStorage里是否保存 localIndex 变量 localStorage.hasOwnProperty("localIndex")，如果存在就读取该变量赋值给
indexindex=localStorage.getItem("localIndex");因为是localStorage长久保存，所以要主动删除 localStorage.removeItem("localIndex")（全文localStorage换成sessionStorage也是可以的）
额外的问题 ，因为这个案例中通过class设置了css3的动画。所以在onFirstInit方法中 根据实际情况对 index 处理一下类型转换 parseInt(index)// JavaScript Document
$(function () {
var index=0;
var lens = $('.swiper-slide').
if(localStorage.getItem("localIndex")){
index=localStorage.getItem("localIndex"); /* 读取保存在localStorage对象里名为 localIndex 的变量的值 赋值给index */
localStorage.removeItem("localIndex"); /* 删除 保存在localStorage对象里的变量 localIndex */
var mySwiper = new Swiper('.swiper-container',{
speed:400,
mode : 'vertical',
resistance:'100%',
initialSlide: index, // 设定初始化时slide的索引
loop:true,
mousewheelControl : true,
grabCursor: true,
pagination: '.pagination',
paginationClickable: true,
onFirstInit:function(){
console.log(typeof index );
* 1. 此处注意index如果是本地存储的localStorage.getItem("index") 则为字符串类型 需要转为整型 parseInt(index)
* 2. parseInt(index) 必须对 lens 取模 否则 本地存储过来的index+1会超出页面数
var i = (parseInt(index)%lens+1);
// $('.swiper-slide').eq(i).addClass('ani-slide');
$('.slide'+i).addClass('ani-slide');
mySwiper.wrapperTransitionEnd(function () {
$('.ani-slide').removeClass('ani-slide');
$('.swiper-slide').eq(mySwiper.activeIndex).addClass('ani-slide')
});至此解决了从一个页面跳转到另一个用swiper写的全屏滚动页面的指定位置。若有不对之处或有待改进之处还望不吝赐教！
展开全文10分享到微信扫一扫为什么我只能投稿？掘金怎么写文章？那么.....就有了掘金专栏！相关文章10}