1. 模块加载名称: carousel。
2. 基础参数选项
2.1. 通过核心方法: carousel.render(options)来对轮播设置基础参数。也可以通过方法: carousel.set(options)来设定全局基础参数。
3. 指示器位置
3.1. 外层元素的class="layui-carousel"用来标识为一个轮播容器。
3.2. 内层元素的属性carousel-item用来标识条目。
4. 切换事件
4.1. 轮播的每一次切换时触发, 回调函数返回一个object参数, 携带的成员如下:
var carousel = layui.carousel;
// 监听轮播切换事件
carousel.on('change(test1)', function(obj){ // test1来源于对应html容器的lay-filter="test1"属性值
console.log(obj.index); // 当前条目的索引
console.log(obj.prevIndex); // 上一个条目的索引
console.log(obj.item); // 当前条目的元素对象
});
5. 重置轮播
5.1. 事实上, 在执行carousel.render(options)方法时, 有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。
var ins = carousel.render(options);
// 重置轮播
ins.reload(options);
6. 例子
6.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播组件 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1" lay-filter="test1">
<div carousel-item>
<img src="bg1.png" alt="" />
<img src="bg2.png" alt="" />
<img src="bg3.png" alt="" />
</div>
</div>
<script type="text/javascript">
layui.use(['carousel'], function(){
var carousel = layui.carousel;
// 建造实例
var ins = carousel.render({
elem: '#test1' // 指向容器选择器
,width: '850px' // 设定轮播容器宽度
,height: '320px' // 设定轮播容器高度
, arrow: 'always' // 切换箭头默认显示状态
// ,full: true // 是否全屏轮播
,anim: 'default' // 轮播切换动画方式
,autoplay: true // 是否自动切换
,interval: 2000 // 自动切换的时间间隔
,index: 1 // 初始开始的条目索引
,indicator: 'inside' // 指示器位置
});
// 监听轮播切换事件
carousel.on('change(test1)', function(obj){ // test1来源于对应html容器的lay-filter="test1"属性值
console.log(obj.index); // 当前条目的索引
console.log(obj.prevIndex); // 上一个条目的索引
console.log(obj.item); // 当前条目的元素对象
});
});
</script>
</body>
</html>
6.2. 效果图