<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
<div carousel-item>
<div style="background-color:red">条目1</div>
<div style="background-color:green">条目2</div>
<div style="background-color:blue">条目3</div>
<div style="background-color:mediumorchid">条目4</div>
<div style="background-color:orange">条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容,如:<img src=""> -->
<script>
layui.use('carousel', function () {
var carousel = layui.carousel;
//***************************建造实例
var ins=carousel.render({
elem: '#test1'
, width: '500px' //设置容器宽度
, arrow: 'always' //始终显示箭头,可选hover,none
//,anim: 'updown' //切换动画方式,可选fade,default
, full: false //全屏
, autoplay: true //自动切换
, interval: 1000 //自动切换的时间间隔
, index: 3 //初始化时item索引,默认时0
, indicator:'inside' //指示器位置,可选outside,none
});
//**************************监听轮播切换事件
carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});
//****************************重置轮播
//var ins = carousel.render(options);
ins.reload({arrow:'hover'});//将arror从alway变成hover
});
</script>
.nbanneritem{
height: 100%;
width: 100%;
position: relative;
}
.nbanneritem p{
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
color: #fff;
line-height: 50px;
background: rgba(0,0,0,.5);
font-size: 18px;
padding-left: 10px;
box-sizing: border-box;
}
<div>
<div class="nbanneritem">
<span>内容</span>
<p>条目1</p>
</div>
</div>
<div>
<div class="nbanneritem">
<span>内容</span>
<p>条目2</p>
</div>
</div>