学习要点:
1.轮播模块
本节课我们来开始了解 Layui 的内置模块:轮播模块。
一.轮播模块
1. 轮播模块,即跑马灯等轮播交互场景,先来看下基本设置;
<div id="test" class="layui-carousel">
<div carousel-item>
<div>轮播图 1</div>
<div>轮播图 2</div>
<div>轮播图 3</div>
<div>轮播图 4</div>
<div>轮播图 5</div>
</div>
</div>
layui.use(['carousel'], () => {
const carousel = layui.carousel
//实例化
carousel.render({
//绑定 dom
elem : '#test',
//长度 100%
width : '100%',
//始终显示箭头
arrow : 'always',
//切换动画方式
anim : 'default'
})
})
2. 对于参数,下面列出比较常用的属性,更多参考手册:
属性 描述
elem 容器选择器,DOM 对象
width 长度
height 高度
full 是否全屏
anmi 动画方式:default、updown、fade
autoplay 是否自动切换,默认 true
interval 间隔时间,不低于 800,默认 3000
index 初始索引,默认 0
arrow 切换箭头显示状态:hover、always
indicator 指定容器:inside、outside、none
trigger 触发事件,默认 click
3. 事件切换:
//触发
carousel.on('change(test)', (obj) => {
console.log(obj)
})