layui-carousel 轮播添加文字标题

在轮播的底部添加一个文字描述的标题,例如下面中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;
}

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注