parallax
如需要开启视差效果(相对父元素移动),设置为true并在所需要的元素上增加data-swiper-parallax属性。
自从3.03版本后Swiper为swiper和slide内元素增加视差效果。有两种表现形式:
1. 对于swiper-container的子元素,视差效果基于swiper的progress(0-1之间的小数,如有三个slide则是0->0.5->1)。
2. 对于slides的子元素,视差效果基于slide的progress(1,0,-1,当前slide向左是从0->1,向右是从0->-1)。
data-swiper-parallax接受两种类型的参数。
1. number(单位:px),移动距离=number*progress。
2. percentage(百分比),移动距离=元素宽度*percentage*progress。
你还可以通过data-swiper-parallax-x 和 data-swiper-parallax-y单独设定其移动方向。
还可通过data-swiper-parallax-duration设定动画持续时间(可选),单位毫秒,默认值是Swiper的speed。
例:swiper内有5个slide,则swiper的progress是 0,0.25,0.5,0.75,1。
swiper-container的子元素,设定了data-swiper-parallax=1000,当slide从0过渡到1时(初始向右滑动),该元素向右移动250px。
slides的子元素,设定了data-swiper-parallax=1000,当slide从0过渡到1时(初始向右滑动),该元素相对于slide从0向右移动到250px处。nextslide内元素相对于slide从-250px向右移动0px处。
自从3.03版本后Swiper为swiper和slide内元素增加视差效果。有两种表现形式:
1. 对于swiper-container的子元素,视差效果基于swiper的progress(0-1之间的小数,如有三个slide则是0->0.5->1)。
2. 对于slides的子元素,视差效果基于slide的progress(1,0,-1,当前slide向左是从0->1,向右是从0->-1)。
data-swiper-parallax接受两种类型的参数。
1. number(单位:px),移动距离=number*progress。
2. percentage(百分比),移动距离=元素宽度*percentage*progress。
你还可以通过data-swiper-parallax-x 和 data-swiper-parallax-y单独设定其移动方向。
还可通过data-swiper-parallax-duration设定动画持续时间(可选),单位毫秒,默认值是Swiper的speed。
例:swiper内有5个slide,则swiper的progress是 0,0.25,0.5,0.75,1。
swiper-container的子元素,设定了data-swiper-parallax=1000,当slide从0过渡到1时(初始向右滑动),该元素向右移动250px。
slides的子元素,设定了data-swiper-parallax=1000,当slide从0过渡到1时(初始向右滑动),该元素相对于slide从0向右移动到250px处。nextslide内元素相对于slide从-250px向右移动0px处。
parallax参数
- 类型:
- boolean
- 默认:
- false
- 举例:
- true
- 启用版本:
- 3.03
效果演示
使用方法示例
<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><div data-swiper-parallax="-100">Slide 1</div></div>
<div class="swiper-slide"><div data-swiper-parallax="-100">Slide 2</div></div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true,
})
</script>
转载原创文章请注明:文章转载自:Swiper中文网 [https://3.swiper.com.cn]
本文地址:https://3.swiper.com.cn/api/basic/2015/0308/197.html