在轮播的底部添加一个文字描述的标题,例如下面中p部分
<div class="layui-carousel" id="test10">
<div carousel-item>
<div title="kwgk"><img class="img" style="width: 100%;" src="statics/images/demo2/01.png"><p>我是介绍</p></div>
<div><img class="img" style="width: 100%;" src="statics/images/demo2/02.png"></div>
</div>
</div>
添加一个css即可
.layui-carousel .layui-this > p {
position: absolute;
z-index: 2;
display: block;
width: 100%;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #F4F4F4;
font-size: 14px;
text-indent: 55px;
line-height: 24px;
text-align: left;
text-indent: 10px;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0;
margin: 0;
}
中间的滚动小圆点右移
.layui-carousel-ind{
bottom: 1px;
text-align: right;
}
你也可以选择居中,把bottom提高一些。
.layui-carousel-ind{
bottom: 26px;
text-align: center;
}