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. Servlet的HttpServletResponse输出

    了解其中的一些字符设置,PrintWriter输出等.. form.html: <!DOCTYPE html> <html> <head> <title> ...

  2. 一道Twitter面试题的解答

    前言 这道面试题是我在博客园首页的一篇文章中看到的,面试题我简单的提取出来了,文章链接:http://news.cnblogs.com/n/192014/. 在我用JS实现了我自己的想法之后,我再一次 ...

  3. 027依据前序遍历和中序遍历，重建二叉树(keep it up)

    剑指offer中题目:http://ac.jobdu.com/problem.php?pid=1385 题目描写叙述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.如果输入的前序遍历和中 ...

  4. Uva 1331 - Minimax Triangulation（最优三角剖分 区间DP）

    题目大意:依照顺时针或者逆时针的顺序给出多边的点,要将这个多边形分解成n-2个三角形,要求使得这些三角行中面积最大的三角形面积尽量小,求最小值. 思路:用区间DP能够非常方便解决,多边形可能是凹边形, ...

  5. WPF学习笔记——ListBox用ItemsSource绑定数据源

    作为一个WPF初学者,感到困难重重.在网上想查个ListBox绑定数据源的示例,结果出来一大堆代码,一看心就烦. 我给个简洁一点的代码: 后台代码: protected class UserItem ...

  6. Android系统Recovery工作原理之使用update.zip升级过程分析（七）---Recovery服务的核心install_package函数【转】

    本文转载自:http://blog.csdn.net/mu0206mu/article/details/7465514 一.       Recovery服务的核心install_package(升级 ...

  7. 洛谷P1725琪露诺(单调队列优化dp)

    P1725 琪露诺 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精.某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪 ...

  8. Python 28 选课系统的讲解

    1.首先我们要对每一个新的项目有一个明确的思路,脑子是好东西,但是好记性不如烂笔头,所以,要把能想到的都写下来 2.然后就是创建项目的整体结构框架,比如说:conf ( 配置文件 ) .core (  ...

  9. JS中对象按属性排序（冒泡排序）

    在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:,name:'中国银 ...

  10. El和标准标签

    EL表达式针对于四大作用域:application,session,request,pagecontext(作用域由大倒小)${作用域获取内容的名字}是根据作用域最小的取,指定作用域${session ...