layui轮播图加文字

可以使用 layui 的轮播图组件和HTML/CSS实现文字覆盖在图片上的效果。以下是一个简单的示例代码：

HTML：

<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>
      <img src="image1.jpg">
      <div class="carousel-caption">第一张图片</div>
    </div>
    <div>
      <img src="image2.jpg">
      <div class="carousel-caption">第二张图片</div>
    </div>
    <div>
      <img src="image3.jpg">
      <div class="carousel-caption">第三张图片</div>
    </div>
  </div>
</div>

CSS:

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  text-shadow: 2px 2px 4px #000;
  z-index: 1;
}

JavaScript:

layui.use('carousel', function(){
  var carousel = layui.carousel;
  
  //建造实例
  carousel.render({
    elem: '#test1',
    width: '100%', //设置容器宽度
    arrow: 'always', //始终显示箭头
    interval: 5000, //自动切换的时间间隔，单位：ms
    height: '500px' //设置容器高度
  });
});

在这个例子中，我们将 `.carousel-caption` 设置为绝对定位，并通过 `transform` 属性将其居中。为了使文字更加突出，我们还添加了一个文本阴影。最后，我们将 `z-index` 属性设置为1，以确保文字始终位于图片上方。

请注意，这只是一个简单的示例代码，你可以根据自己的需要调整样式和布局。