在去年发布了slide3D插件,由于时间仓促,并没有实现完整版本。最近收到小伙伴的反馈,基本都是两点问题:
- 分页器点击没有跳转
- 没有自动播放功能
相关文章:酷炫的轮番效果是如何实现的
为了实现一个完整的插件,这两天将这两个功能已经补充完善。
Github: slide3D(最新版本1.2.1)
实例:slide3D实例
参数设置说明:
var mySlide = Slide3D('.container3D', {
width: 700, // 宽度
height:306, // 高度
direction: 'horizontal | vertical', // 定义切换方向,只对slide有效
effect: 'fragment', // flip | turn | slide | flat | fragment // 切换效果
sources: ['image-slider-1.jpg','image-slider-2.jpg','image-slider-3.jpg','image-slider-4.jpg','image-slider-5.jpg'], // 除了effect设为slide外,在其他切换效果的情况下,都需要通过sources给每个slide指定图片。
box:{
cols: 3, // 列
rows: 6 // 行
},
pagination: true, // 设置分页器
loop:true, // 是否循环,只有effect为slide时可以设置,其他效果默认循环
paginationClickable: true, // 分页器可点击跳转
autoplay: 2000, // 自动播放时间,单位秒,必须为正整数
autoplayDisableOnInteraction : true // 用户操作后是否不保留自动播放,默认为true,不保留
});
如有疑问或好的建议,欢迎在下方的评论区告知!