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. hdu 3657 最大点权独立集变形（方格取数的变形最小割，对于最小割建图很好的题）

    转载:http://blog.csdn.net/cold__v__moon/article/details/7924269 /* 这道题和方格取数2相似,是在方格取数2的基础上的变形. 方格取数2解法 ...

  2. [转]wcf系列学习——服务托管

    今天是系列的终结篇,当然要分享一下wcf的托管方面的知识. wcf中托管服务一般有一下四种: Console寄宿:             利于开发调试,但不是生产环境中的最佳实践. winform寄 ...

  3. open cursor too much error

    今天遇到一个错误ORA-01000: maximum open cursors exceeded. 客户想增加 DB 的open_cursor这个参数. 但是我看了下,她的程序要打开几千个cursor ...

  4. TRIZ的成功案例

    这篇採訪稿是几年前的,是TRIZ成功案例离我近期的,由于主人公是我的朋友,请点击查看: 培训后技术难题就攻克了 后记:学了TRIZ并不能让您100%解决您全部遇到的问题,但这样的思想和方法确实是最具操 ...

  5. Oracle EBS LOV速度优化

    一.现象 本文地址:http://blog.csdn.net/sunansheng/article/details/50952758 当我们的EBS LOV的SQL写得比較复杂.或者数据量比較多时,L ...

  6. Dubbo实战（一）高速入门

    Dubbo是什么? Dubbo[]是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...

  7. OTA制作及升级过程笔记【转】

    本文转载自:http://www.it610.com/article/5752570.htm 1.概述 1.1   文档概要 前段时间学习了AndroidRecovery模式及OTA升级过程,为加深理 ...

  8. Privoxy shadowscocks代理

    ubuntu已经启动好了sock5的代理, 代理为: 127.0.0.1:1080. #使用Privoxy将sock5代理映射为http代理. 安装Privoxy sudo apt-get updat ...

  9. B1922 [Sdoi2010]大陆争霸 最短路

    我一直都不会dij的堆优化,今天搞了一下...就是先弄一个优先队列,存每个点的数据,然后这个题就加了一点不一样的东西,每次的最短路算两次,一次是自己的最短路,另一次是机关的最短路,两者取最大值才是该点 ...

  10. 感知器算法 C++

    We can estimate the weight values for our training data using stochastic gradient descent. Stochasti ...