swiper4 怎么重新初始化
1个回答
展开全部
1.1initialSlide设定初始化时slide的索引。设置为1后,Swiper初始化时默认显示第2个轮播图
1.2direction设置Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。horizontal:横向切换 ,vertical:竖向切换。
1.3speed切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间。
1.4grabCursor设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)
1.5parallax设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之1
视差位移变化
在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向)
data-swiper-parallax接受两种类型的参数。
number(单位:px),如-300,从右边300px进入左边出去。
percentage(百分比),移动距离=该元素宽度 * percentage。
视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1,如0.5,从半透明进入半透明出去
视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5,从一半大小进入一半大小出去
还可通过data-swiper-parallax-duration设定视差动画持续时间(ms)。默认值是Swiper的speed,与切换时间同步。
*设定透明度或缩放必须同时设定位移,否则无效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
1.2direction设置Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。horizontal:横向切换 ,vertical:竖向切换。
1.3speed切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间。
1.4grabCursor设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)
1.5parallax设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之1
视差位移变化
在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向)
data-swiper-parallax接受两种类型的参数。
number(单位:px),如-300,从右边300px进入左边出去。
percentage(百分比),移动距离=该元素宽度 * percentage。
视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1,如0.5,从半透明进入半透明出去
视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5,从一半大小进入一半大小出去
还可通过data-swiper-parallax-duration设定视差动画持续时间(ms)。默认值是Swiper的speed,与切换时间同步。
*设定透明度或缩放必须同时设定位移,否则无效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询