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. 联赛前集训日记Day3

    考试 竟然出了道莫比乌斯函数的应用?? 简直没法玩 刷题 莫比乌斯函数摆在面前,咋能很快改完啊 生活 GGGGGGGGGGG 自己浪过头了,开回家一周 这车翻得猝不及防,然而自己作的,自己受,只是给别 ...

  2. noip模拟赛 时之终末

    题目背景 圣乔治:不用拘泥,剩下的时间已不多…… 圣乔治:直呼我的真名—— 丝佩碧雅:圣乔治大人 圣乔治:如今,已无法维持结界,或是抑制深渊的前进 圣乔治:既然如此,我将献上这副身躯,期望最后的战斗 ...

  3. CF #319 div 2 E

    在一个边长为10^6正方形中,可以把它x轴分段,分成1000段.奇数的时候由底往上扫描,偶数的时候由上往下扫描.估计一下这个最长的长度,首先,我们知道有10^6个点,则y邮方向最多移动10^3*10^ ...

  4. PF, Page File, 页面文件

    PF, Page File, 页面文件 是硬盘中用来当作内存使用的,仅仅提高物理内存可能导致CPU使用率高,因为降低了命中率: 学习了:https://baike.baidu.com/item/PF% ...

  5. 【struts2】中method={1}具体解释

    我们在使用struts2的时候,有时候为了简化struts2的配置项而採用通配符的方式,例如以下代码: <action name="ajaxregister!*" class ...

  6. PHP项目的设计过程

    过程说明: 1)产品部依据需求设计出原型图和需求文档. 2)产品部和需求方与技术一起过一遍需求. 这样能够让需求方确认需求:和所參与的技术(设计部,制作部,php,測试部等)对要设计的产品有一个大致的 ...

  7. iOS 基础类解析 - NSString、NSMutableString

    iOS 基础类解析 - NSString 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  8. 01背包模板、全然背包 and 多重背包（模板）

    转载请注明出处:http://blog.csdn.net/u012860063 贴一个自觉得解说不错的链接:http://www.cppblog.com/tanky-woo/archive/2010/ ...

  9. Getting Installation aborted (Status 7) ApplyParsePerms: lsetfilecon of /syst...【转】

    OTA升级失败:原文http://en.miui.com/thread-112197-1-1.html Do you get this "Status 7" error in Re ...

  10. 【BZOJ 1601】 灌水

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1601 [算法] 最小生成树 [代码] #include<bits/stdc++ ...