swiper——Basic(parallax,pagination)

一、个人案例




    
    Title
    
    



Slide 1
Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

Slide 2
Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

Slide 3
Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

效果图

(1)parallax
设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之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。

2.视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1,如0.5,从半透明进入半透明出去

3.视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5,从一半大小进入一半大小出去

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

*设定透明度或缩放必须同时设定位移,否则无效(4.0.5)

透明度变化

(2)pagination
部分参数

el:分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外,不同Swiper的组件应该有所区分,如#pagination1,#pagination2。
type:分页器样式类型,可选
		‘bullets’  圆点(默认)
		‘fraction’  分式 
		‘progressbar’  进度条
		‘custom’ 自定义
progressbarOpposite:使进度条分页器与Swiper的direction参数相反,也就是说水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
bulletElement:设定分页器指示器(小点)的HTML标签。
dynamicBullets:动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏
dynamicMainBullets:动态分页器的主指示点的数量
hideOnClick:默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
clickable:此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换

查看全部参数请到官网
progressbarOpposite效果

dynamicBullets效果

你可能感兴趣的:(swiper——Basic(parallax,pagination))