Swiper之滑块4
最炫3D走一波:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper之滑块3</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper2.min.css">
<!--Swiper3.0.4-->
<style>
* {
margin: 0;
padding: 0;
}
.blue-slide {
background: #4390EE;
}
.red-slide {
background: #CA4040;
}
.orange-slide {
background: #FF8604;
}
.green-slide{
background: #00FF7F;
}
.violet-slide{
background: #A020F0;
}
.swiper-slide {
line-height: 300px;
color: #fff;
font-size: 36px;
text-align: center;
}
element.style {
transform: translate3d(-800px, 0px, 0px);
transition-duration: 2000ms;
}
#swiper-container3 .swiper-wrapper {
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate(0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">第一页</div>
<div class="swiper-slide red-slide">第二页</div>
<div class="swiper-slide orange-slide">第三页</div>
<div class="swiper-slide green-slide">第四页</div>
<div class="swiper-slide violet-slide">第五页</div>
</div>
</div>
<script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
});
</script>
</body>
</html>
//
最新文章
- 3.2 一般的哈尔空间Vj
- SSH框架流程详解
- php大力力 [043节] 现在要做个删除前的提示功能
- ThinkJS 项目用 WebStorm 来设置断点与调试
- Android 学习笔记之WebService实现远程调用+内部原理分析...
- Hibernate之一对多(多对一)
- [JavaEE,MVC] Struts工作原理
- 【ZeroMQ】消息模式
- python学习笔记27(python中sys模块的使用)
- Jquery为下拉列表动态赋值与取值,取索引
- oracle行列转换总结-转载自ITPUB
- Discuz!源代码阅读笔记之common.inc.php文件【1】
- arrayPointer
- %{TIMESTAMP_ISO8601} 匹配2016-08-29 17:40:01,191
- java实现字符串匹配问题之求两个字符串的最大公共子串
- django安装配置及测试
- wemall app商城源码中实现带图片和checkbox的listview
- 解决spring定时任务执行2次和tomcat部署缓慢的问题
- 芝麻HTTP: Python爬虫利器之PyQuery的用法
- JVM学习笔记一:Java运行时数据区域