swiper使用
作者：互联网
swiper使用
初始化
var mySwiper = new Swiper ('容器区域类', {
// 存放swiper属性
})
属性
基本属性：
1.initialSlide 设定初始化时slide的索引,就是设置默认显示第几张图
2.direction swiper滑动方向 水平方向切换horizontal或垂直方向vertical
3.speed 切换速度 毫秒单位
4.breakpoints 类似媒体查询 eg:
breakpoints: {
320: { //当屏幕宽度大于等于320
slidesPerView: 2, //两个slide
spaceBetween: 10
},
768: { //当屏幕宽度大于等于768
slidesPerView: 3,//三个slide
spaceBetween: 20
},
1280: { //当屏幕宽度大于等于1280
slidesPerView: 4,//四个slide
spaceBetween: 30 ,// slide间隔
}
}
5.nested 嵌套的子swiper是否显示 布尔值
6.init swiper实例时是否立即初始化 默认true，禁止了，可以使用mySwiper.init()来初始化 -----重点
7.on 注册事件 this指代Swiper实例 ----重点
eg:
on: {
slideChange: function () {
console.log(this.activeIndex);
},
}
或：mySwiper.on('slideChange', function () {});
8.preloadImages 默认为true，Swiper会强制加载所有图片后才初始化 ----重点
9.cssModes 布尔值 默认false 设置为true后PC端鼠标无法拖动，移动端可以滑动
10.enabled 设置Swiper初始时是否可用,默认是可用true，当Swiper被禁用时，它将隐藏所有导航元素（分页器、按钮、滚动条）并且不会响应任何事件和交互。 可通过函数enable()和disable()动态启用或禁用Swiper ---难点
11.createElements 自动生成导航元素的HTML 可以不用设置导航条,分页器等等
事件
所有事件需要在Swiper对象内的on里面存放或在实例外定义执行
1.init() 初始化
2.touchStart/Move/End/(swiper,event) 触碰slider时执行
eg:touchStart: function(swiper,event){
alert('事件触发了;');
}
3.slideChangeTransitionStart/End(swiper) 当slide过渡到内外一个slide时或结束时执行
4.click(swiper,event) 点击swiper执行 有200-300延迟 swiper5有300延迟
eg:on:{
click: function(){
alert('你点了Swiper');
},
}
5.top(swiper,event) 点击swiper执行 使用top作为点击函数
6.doubleTap(swiper,event) 双击swiper
7.reachBeginning/End(swiper) 重新回到开始/结束slide触发函数
网格slider分布
1.centeredSlides 设定为true时，active slide会居中，默认居左
2.centeredSlidesBounds 布尔值 第一个和最后一个Slide 始终贴合边缘
3.slidesPerView 设置slider容器能够同时显示的slides数量
4.spaceBetween 在slide之间设置距离（单位px）
5.slidesPerColumn 设置多少列。
free反弹滑动模式
1.freeMode 默认为false，普通模式：slide滑动时只滑动一格，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合
2.freeModeMomentumRatio free模式动量值(移动惯量),设置的值越大，当释放slide时的滑动时间越长。默认1s。
...
loop环路
1.loop 设置为true 则开启loop模式,loop模式在与free模式同用时会产生抖动 循环loop
2.loopPreventsSlide 循环过渡停顿再下一张slider效果
组件
1.autoplay 设置为true自动切换 默认设置 autoplay:ture等同于 autoplay:{
delay:3000,//停顿三秒
stopOnLastSlide: false,
disableOnInteraction: true,
}
(1)delay 切换的时间间隔
(2)stopOnLastSlide 设置为true，当切换到最后一个slide时停止自动切换 loop模式下无效
(3)disableOnInteraction 是否禁止autoplay。默认为true：停止
(4)reverseDirection 开启反向自动轮播。默认false
(5)pauseOnMouseEnte 开启此功能，鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
(6)mySwiper.autoplay.start()/running/stop() 实例对象的方法 是否开启自动切换 开始/是否执行/暂停
2.effects切换效果
默认为slide 普通切换
(1)fade 淡入
(2)cube 方块
(3)coverflow 3d流
(4)flip 3d翻转
参数：
slideShadows：slides的阴影。默认true。
limitRotation：限制最大旋转角度为180度，默认true
eg:
effect : 'flip',
flipEffect: {
slideShadows : true,
limitRotation : true,
}
swiper与动画
步骤
1.导入swiper.js和animate.css
2.初始化隐藏元素控制动画
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
}
}
})
3.在运动元素添加类 ‘ani’后 可以使用动画参数
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p> /可简写 s-a-effect/
</div>
切换效果（部分常用）
s-a-effact:" "
bounce抖动系列
1.bounce 抖动
2.flash 闪动
3.pulse 缩返
4.rubberBand 拉伸抖缩
5.wobble 摇头
fade淡化系列
1.fadeIn 淡入
分支[
fadeInRight 右淡入
fadeInLeft 左淡入
fadeInUp 上淡入
fadeInDown 下淡入
]
2.fadeOut 淡出
分支[
fadeOutRight 右淡出
fadeOutLeft 左淡出
fadeOutUp 上淡出
fadeOutDown 下淡出
]
flip z轴旋转系列
1.flip 旋转
2.flipOutX X轴旋出
3.flipInX X轴旋入
标签：默认,slide,swiper,使用,true,Swiper,切换 来源： https://www.cnblogs.com/lht1132950411/p/16215080.html