Layui中轮播图切换函数说明

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);
            }
		});
)}