最炫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>

//

Swiper之滑块4的更多相关文章

  1. Swiper之滑块3

    上章Swiper滑块2.Swiper滑块1都是手动的,这章我们来自动的! 其实只是加了Swiper的speed(滑动速度即slider自动滑动开始到结束的时间)属性而已(∩_∩),单位是ms < ...

  2. Swiper之滑块2

    对比之前Swiper滑块1来说,我们添加一下背景颜色来看看: <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  3. 【swiper】 滑块组件说明

    swiper 滑块视图容器,其原型如下: <swiper indicator-dots="[Boolean]" indicator-color="[Color]&q ...

  4. Swiper之滑块1

    之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...

  5. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. 微信小程序swiper 前后边距的使用

    小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分       next-margin:后边距,可用于露出后一项的 ...

  8. 微信小程序之视图容器（swiper）组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  9. 微信小程序初体验(上)

    版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...

随机推荐

  1. PL/pgSQL学习笔记之八

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 另外一种声明 PL/pgSQL 函数的方法是使用 returns ...

  2. LVS测试小结

    RedHat5实现负载均衡 http://blog.sina.com.cn/s/blog_4e424e2101007rie.html http://www.doc88.com/p-9975618478 ...

  3. CodeForces 164A Variable, or There and Back Again 搜索

    Variable, or There and Back Again 题目连接: http://codeforces.com/problemset/problem/164/A Description L ...

  4. C# 仿制QQ弹出新闻消息框

    打开QQ的时候,QQ新闻弹出窗体在屏幕的右下角就会慢慢升起一个小窗口,占用的地方不大,可以起到提示的作用.下面就让我们来看看,怎样用系统API来轻松实现这个功能. API原型函数: bool Anim ...

  5. Linux用户空间与内核空间（理解高端内存）

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...

  6. [原创]SQL SERVER 2008R2安装

    配置系统环境说明 操作系统:Windows 7 操作系统版本:旗舰版 SP1 操作系统位数:x64 注:其它系统配置也基本相似,只是可能菜单的名字或者所处位置不一样,具体的配置如有不同,请自行搜索 安 ...

  7. C# 之 集合整理

    集合,表示可以通过遍历每个元素来访问的一组对象(特别是可使用foreach循环访问):一个集合包括多个元素,即有一个集合类对象和N个元素对象. BCL(Base Class Library, 基类库) ...

  8. 8. Android框架和工具之 NineOldAndroids（动画框架）

    1. NineOldAndroids 自Android 3.0以上的版本,SDK新增了一个android.animation包,里面的类都是跟动画效果实现相关的,通过Honeycomb API,能够实 ...

  9. centos下查看rpm包安装位置

    1.如何安装rpm软件包 rpm -ivh your-package.rpm其中your-package.rpm是你要安装的rpm包的文件名,一般置于当前目录下. 2.如何卸载rpm软件包使用命令 r ...

  10. unity与Android交互

    unity打包成安卓工程中的JAVA代码 public class UnityPlayerActivity extends Activity { //Unity中调用此函数 public int Ma ...