parallax

设置为true开启Swiper的视差效果，内容在切换时更有层次感。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的1/(slide个数-1)

参数名	类型	默认	描述
enabled	boolean	true	组件的默认设置，启用Parallax

1.视差位移变化
在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）
data-swiper-parallax接受两种类型的参数。
number（单位：px），如-300，从右边300px进入左边出去。
percentage（百分比），移动距离=该元素宽度 * percentage。
2.视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1，如0.5，从半透明进入半透明出去。
*设定透明度或缩放必须同时设定位移，否则无效(4.5.1前) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
3.视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5，从一半大小进入一半大小出去。

还可通过data-swiper-parallax-duration设定视差动画持续时间（ms）。默认值是Swiper的speed，与切换时间同步。

parallax信息

类型：: boolean | ParallaxOptions
默认：: false
举例：: true
启用版本：: 4.0.0

效果演示

使用方法示例

从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<div class="swiper">
<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 class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
            <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>从右边300px开始进入，时间600ms</p>
            </div>
            <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
            <div data-swiper-parallax-scale="0.15" >缩放变化</div>
        </div>
    </div>
</div>
<script language="javascript"> 
    var mySwiper = new Swiper('.swiper',{
            parallax : true,
    })
</script>

转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/parallax/197.html

下一篇：没有了

配置选项

parallax

parallax信息

效果演示

使用方法示例

网友求助