轮播各种配置

<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>