swiper 的3d轮播效果，移动端适用

(1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css)。

<head>

 <link

rel="stylesheet"

href="css/idangerous.swiper.css">

 <link

 rel="stylesheet"

href="css/idangerous.swiper.3dflow.css">

 <script

src="js/idangerous.swiper-2.x.min.js"></script>

 <script

 src="js/idangerous.swiper.3dflow-2.x.js"></script>

</head>

(2). 插入相应代码

var mySwiper =new

 Swiper('.swiper-container',{

 //其他设置

 tdFlow:

 {

 rotate :,

 stretch :,

 depth:,

modifier :,

shadows :true

}

});

(3). 参数分析

rotate :number,   //侧转角度（正值凹陷）、（负值凸出）

     stretch : number,  //每个slide之间拉伸值（正值紧贴）、（负值远离）

     depth :  number,   // 正值越大slide为远景图（可负值）

     modifier :  number,  //depth和rotate和stretch的倍率，值越大这三个参数的效果越明显

     shadows :  true     //是否使用阴影

 <script>

  var mySwiper = new Swiper('.swiper-container',{

        slidesPerView:  ,

        loop:  true,

        //Enable 3D Flow

        tdFlow: {}  //默认，凹陷，slide之间有间距

  })

  </script>

<script>

  var  mySwiper = new Swiper('.swiper-container',{

         slidesPerView: ,

         loop:true,

         //Enable 3D Flow

         tdFlow: {

                      rotate : ,//侧转角度（正值凹陷）

                      stretch :,//每个slide之间拉伸值（正值紧贴）

                      depth: ,  //值越大为远景（可负值）

                      modifier : ,

                      shadows: true

       }

  })

  </script>

  <script>

   var  mySwiper = new Swiper('.swiper-container',{

          slidesPerView:,

          loop:true,

 //Enable 3D Flow

          tdFlow: {

                       rotate : -,//侧转角度（负值凸出）

                       stretch :,

                       depth: ,

                       modifier : ,

                       shadows: true

           }

   })

   </script>

<script>

   var mySwiper = new Swiper('.swiper-container',{

         slidesPerView:,

         loop:true,

         //Enable 3D Flow

         tdFlow: {

                     rotate : ,

                     stretch :-,//每个slide之间拉伸值（负值远离）

                     depth: ,  //值越大图片越往后退（可负值）

                     modifier : ,

                     shadows: true

         }

    })

    </script>

Demo效果：

http://2.swiper.com.cn/demo/3dflow/index.html

详细参数：

http://2.swiper.com.cn/api/3dflow/2015/0203/180.html

Swiper 3D flow轮播使用方法的更多相关文章

  1. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  2. swiper如何实现轮播嵌套轮播

    之所以要写这篇文章是因为插件有个bug,要改掉这个bug比较麻烦,所以就想了个折中的办法,绕过这个限制,方法千万条,功能干出来第一条,哈哈 最近做了个需求,效果图是这样的 第一个框是大轮播,第二个框是 ...

  3. 实现一个3D图片轮播插件 —— 更新版

    前言:     前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...

  4. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. 使用swiper来实现轮播图

    使用swiper来实现轮播图 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,推荐两个网址: 1.http://ww ...

  7. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  9. 使用Swiper快速实现3D效果轮播

    最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...

随机推荐

  1. Java和JS MD5加密-附盐值加密demo

    JAVA和JS的MD5加密 经过测试:字母和数据好使,中文不好使. 源码如下: ** * 类MD5Util.java的实现描述: * */public class MD5Util { // 获得MD5 ...

  2. （二）模板引擎之Velocity脚本基本的语法全

    velocity velocity三种reference     变量:对java对象的一种字符串化表示,返回值调用了java的toString()方法的结果.     方法:调用的是对象的某个方法. ...

  3. 在Ubuntu 14.04 上安装 FTP 服务

    1. sudo apt-get update 2. sudo apt-get install vsftpd 3. adduser sammy Assign a password when prompt ...

  4. NSRange and NSString对象

    http://www.cnblogs.com/pengyingh/articles/2451292.html 当谈到NSString方法时,你会发现很多都涉及到NSRange.不必操心.它事实上仅仅只 ...

  5. EF + WCF学习笔记——EF实体类序列化

    项目中如果 EF + WCF 结合使用,模式应该是EF负责读取数据库,传递数据对象给WCF,WCF再将这些对象传送给客户端.因为WCF传送的对象需要序列化,而EF默认生成的对象并没有序列化,很可能会出 ...

  6. UESTC--1253--阿里巴巴和n个大盗 (博弈)

     阿里巴巴和n个大盗 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit St ...

  7. 判断文件是否为空 C++

    #include <sys/stat.h> int stat(const char *restrict pathname, struct stat *restrict buf); stru ...

  8. Struts2 中 result type=”json” 的参数解释

    转自:http://wangquanhpu.iteye.com/blog/1461750 1, ignoreHierarchy 参数:表示是否忽略等级,也就是继承关系,比如:TestAction 继承 ...

  9. Cuckoo for Hashing

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2719 #include <stdio.h ...

  10. img标签间距问题

    关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距. <!doctype html> 2 <html lang="en"> 3 ...