學(xué)習(xí)要點：
1.輪播模塊
本節(jié)課我們來開始了解 Layui 的內(nèi)置模塊：輪播模塊。
一．輪播模塊
1. 輪播模塊，即跑馬燈等輪播交互場景，先來看下基本設(shè)置；
<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. 對于參數(shù)，下面列出比較常用的屬性，更多參考手冊：
屬性 描述
elem 容器選擇器，DOM 對象
width 長度
height 高度
full 是否全屏
anmi 動畫方式：default、updown、fade
autoplay 是否自動切換，默認(rèn) true
interval 間隔時間，不低于 800，默認(rèn) 3000
index 初始索引，默認(rèn) 0
arrow 切換箭頭顯示狀態(tài)：hover、always
indicator 指定容器：inside、outside、none
trigger 觸發(fā)事件，默認(rèn) click
3. 事件切換：
//觸發(fā)
carousel.on('change(test)', (obj) => {
console.log(obj)
})