swiper2.7.6常用效果整理

swiper2.7.6官网

在线预览:swiper2.7.6_demo

下载

1.swiper-基础效果

"swiper_demo swiper_demo1">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"pagination">
"arrow"> "arrow-left">left "arrow-right">right
复制代码

2.swiper-列表

"swiper_demo swiper_demo2">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"swiper-slide" style="background-color: #973e76;"> swiper-slide4
"swiper-slide" style="background-color: #ca4040;"> swiper-slide5
"pagination">
"arrow"> "arrow-left">left "arrow-right">right
复制代码

3.swiper-垂直滚动

注:需要给 swiper-container 和 swiper-slide 设置高度。 swiper-container 高度 = slidesPerView * swiper-slide 高度。

"swiper_demo swiper_demo3">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"swiper-slide" style="background-color: #973e76;"> swiper-slide4
"swiper-slide" style="background-color: #ca4040;"> swiper-slide5
"arrow"> "arrow-up">up "arrow-down">down
复制代码

4.swiper-选项卡效果

"swiper_demo swiper_demo4">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee"> Tab 1 con
"swiper-slide" style="background-color: #49a430"> Tab 2 con
"swiper-slide" style="background-color: #ff8604"> Tab 3 con
复制代码

5.swiper-3D效果

需要引入 idangerous.swiper.3dflow.js 和 idangerous.swiper.3dflow.css。 rotate:slide 做 3d 旋转时 Y 轴的旋转角度。 stretch:每个 slide 之间的拉伸值,越大 slide 靠得越紧。 depth:slide 的位置深度,值越大z轴距离越远,看起来越小。 shadows:产生了 3d 旋转的 slide 是否使用阴影。 注:IE8 及 IE8以下不支持 3D 效果,变为列表模式。

"swiper_demo swiper_demo5">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"swiper-slide" style="background-color: #ca4040;"> swiper-slide4
"swiper-slide" style="background-color: #973e76;"> swiper-slide5
"arrow"> "arrow-left">left "arrow-right">right
复制代码

6.swiper-双轮播效果

"swiper_demo swiper_demo6">
"swiper-container swiper_top">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"swiper-slide" style="background-color: #ca4040;"> swiper-slide4
"swiper-slide" style="background-color: #973e76;"> swiper-slide5
"arrow"> "arrow-left">left "arrow-right">right
"swiper-container swiper_bottom">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"swiper-slide" style="background-color: #ca4040;"> swiper-slide4
"swiper-slide" style="background-color: #973e76;"> swiper-slide5
复制代码

7.swiper-添加数字分页效果1

"swiper_demo swiper_demo7">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"pagination">
复制代码

8.swiper-添加数字分页效果2

"swiper_demo swiper_demo8">
"swiper-container">
"swiper-wrapper">
"swiper-slide" style="background-color: #4390ee;"> swiper-slide1
"swiper-slide" style="background-color: #ff8604;"> swiper-slide2
"swiper-slide" style="background-color: #49a430;"> swiper-slide3
"pagination">
"page_text">
复制代码

9.swiper-根据容器 container 的宽度调整 slides 数目

"swiper_demo swiper_demo9">
"swiper-container">
"swiper-wrapper">
"swiper-slide" >

"background-color: #4390ee;">swiper-slide1

"swiper-slide" >

"background-color: #ff8604;">swiper-slide2

"swiper-slide" >

"background-color: #49a430;">swiper-slide3

"arrow"> "arrow-left">left "arrow-right">right
复制代码

期待您的关注!

你可能感兴趣的:(swiper2.7.6常用效果整理)