Swiper 3D flow使用方法

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

<head>

<linkrel="stylesheet"href="css/idangerous.swiper.css">

<link rel="stylesheet"href="css/idangerous.swiper.3dflow.css">

<scriptsrc="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 :50,

stretch :0,

depth:100,

modifier :1,

shadows :true

}

});

(3). 参数解析

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

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

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

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

shadows : true //是否使用阴影

Swiper 3D flow使用方法

//Enable 3D Flow
tdFlow: {} //默认，凹陷，slide之间有间距
})
</script>

Swiper 3D flow使用方法

//Enable 3D Flow
tdFlow: {
    rotate : 30,//侧转角度（正值凹陷）
    stretch :10,//每个slide之间拉伸值（正值紧贴）
    depth: 150, //值越大为远景（可负值）
    modifier : 1,
    shadows: true
}
})
  </script>

Swiper 3D flow使用方法

//Enable 3D Flow

    tdFlow: {
    rotate : -30,//侧转角度（负值凸出）
    stretch :0,
    depth: 120,
    modifier : 1,
    shadows: true
}
})
</script>

Swiper 3D flow使用方法

//Enable 3D Flow
tdFlow: {
    rotate : 10,
    stretch :-50,//每个slide之间拉伸值（负值远离）
    depth: 400, //值越大图片越往后退（可负值）
    modifier : 1,
    shadows: true
}
})
  </script>

Demo效果：http://2.swiper.com.cn/demo/3dflow/index.html

详细参数：http://2.swiper.com.cn/api/3dflow/2015/0203/180.html

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.****.net/jiangjunshow

Swiper 3D flow使用方法

相关推荐