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. （41）Spring Boot 使用Java代码创建Bean并注册到Spring中【从零开始学Spring Boot】

    已经好久没有讲一些基础的知识了,这一小节来点简单的,这也是为下节的在Spring Boot中使用多数据源做准备. 从Spring 3.0开始,增加了一种新的途径来配置Bean Definition,这 ...

  2. Ext.Ajax.request方法 参数

    json数据服务器回传的方法. 在api总指出回传的格式{success;true,data:{clientName: "Fred. Olsen Lines",   portOfL ...

  3. JSP中page、request、session、application作用域的使用

    几乎所有的Web开发语言都支持Session功能,Servlet也不例外. Servlet/JSP中的Session功能是通过作用域(scope)这个概念来实现的. 作用域分为四种,分别为: page ...

  4. POJ 3278 Catch That Cow（求助大佬）

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 109702   Accepted: 34255 ...

  5. Spring Boot使用thymeleaf模板时报异常：template might not exist or might not be accessible by any of the configured Template Resolvers

    错误如下: template might not exist or might not be accessible by any of the configured Template Resolver ...

  6. sap scriptfom 多语言翻译

    在某项目中,因为客户上线较早,非常多打印程序的form是由scriptform制做,又因为美国工厂要上线.免不了对scriptform进行多语言翻译.以下是对当中的一个交货单打印进行的多语言翻译,分享 ...

  7. 64位oracle数据库用32位plsql developer无法连接问题（无法载入oci.dll）

    在64位操作系统下安装oracle数据库,新下载了64位数据库(假设是32位数据库安装在64位的操作系统上,无论是client还是server端.都不要去选择C:\Program Files (x86 ...

  8. SQL语句改动表名和字段名

    今天有个暂时任务,改动生产环境的数据库表名和字段名.曾经要改动表名字段名都是在开发环境.直接打开 SQL Server找到相应的表或字段重命名就OK啦,但是这是线上数据库,再想直接F2改动是不可能的啦 ...

  9. javase - 点餐系统

    public class OrderMsg { public static void main(String[] args) throws Exception { /** * 订餐人姓名.选择菜品.送 ...

  10. 蓝桥杯--2011--购物券（dfs）

     公司发了某商店的购物券1000元,限定只能购买店中的m种商品.每种商品的价格分别为m1,m2,-,要求程序列出所有的正好能消费完该购物券的不同购物方法. 程序输入: 第一行是一个整数m,代表可购 ...