Layui中轮播图切换函数说明
官方文档 链接
关于轮播图的使用和讲解,官方文档例子都说的够了。
切换函数说明
除了主动切换函数没有作说明(比如我觉得切换箭头不好看,想换成自己的图片/按钮)
其实也很简单,如果debug js函数也可以找到
layui.use(['carousel','form'], function(){
var carousel = layui.carousel;
var layer = layui.layer;
var form = layui.form;
//建造实例
var ins = carousel.render({
elem: '#container'
,arrow: 'hover' //始终显示箭头
,anim: 'default' //切换动画方式
,autoplay: false
,indicator: 'none'
,height: '800px'
});
//上一张
$('.above').click(function(){
ins.slide('sub');
});
//下一张
$('.next').click(function(){
ins.slide('add');
});
})
其他
其他的按照官方文档都是比较好理解使用的,另外切换的监听函数和reload方法可以重置ins的各种参数
比如更改高度
layui.use(['carousel','form'], function(){
var carousel = layui.carousel;
var layer = layui.layer;
var form = layui.form;
//建造实例
var ins = carousel.render({
elem: '#container'
,arrow: 'hover' //始终显示箭头
,anim: 'default' //切换动画方式
,autoplay: false
,indicator: 'none'
,height: '800px'
});
carousel.on('change(test)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
var options;
if (obj.index === 0 && obj.prevIndex === 1) {
options = {
height: '800px'
};
ins.reload(options);
} else if (obj.prevIndex === 0) {
options = {
height: '260px'
};
ins.reload(options);
}
});
)}