html轮播图片下方加多张图片和文字，文字在对应图片下方

要实现在轮播图片下方添加多张图片和对应的文字的效果，可以使用HTML中的`<div>`和CSS中的`position`属性。

首先，将轮播图片和对应的文字都放在一个`<div>`标签中，如下所示：

<div class="carousel">
  <div class="slide">
    <img src="your-image-url1.jpg" alt="your-image1">
    <div class="description">
      <img src="your-image-url4.jpg" alt="your-image4">
      <p>your text here4</p>
    </div>
  </div>
  <div class="slide">
    <img src="your-image-url2.jpg" alt="your-image2">
    <div class="description">
      <img src="your-image-url5.jpg" alt="your-image5">
      <p>your text here5</p>
    </div>
  </div>
  <div class="slide">
    <img src="your-image-url3.jpg" alt="your-image3">
    <div class="description">
      <img src="your-image-url6.jpg" alt="your-image6">
      <p>your text here6</p>
    </div>
  </div>
</div>

然后，使用CSS对每个轮播图片和对应的文字容器设置`position: relative`，并对每个文字容器内的图片设置`position: absolute`，并设置`bottom: 0`，这样就可以将每个文字容器内的图片和文字都放在对应的轮播图片下方了。

.carousel {
  position: relative;
}

.carousel .slide {
  position: relative;
}

.carousel .slide .description {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.carousel .slide .description img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.carousel .slide .description p {
  margin: 0;
}

这里使用了`flex`布局来让每个文字容器内的图片和文字水平居中显示，同时使用`align-items`来让它们垂直居中显示，可以根据需要进行调整。

完整的代码如下所示：

<div class="carousel">
  <div class="slide">
    <img src="your-image-url1.jpg" alt="your-image1">
    <div class="description">
      <img src="your-image-url4.jpg" alt="your-image4">
      <p>your text here4</p>
    </div>
  </div>
  <div class="slide">
    <img src="your-image-url2.jpg" alt="your-image2">
    <div class="description">
      <img src="your-image-url5.jpg" alt="your-image5">
      <p>your text here5</p>
    </div>
  </div>
  <div class="slide">
    <img src="your-image-url3.jpg" alt="your-image3">
    <div class="description">
      <img src="your-image-url6.jpg" alt="your-image6">
      <p>your text here6</p>
    </div>
  </div>
</div>

<style>
  .carousel {
    position: relative;
  }

  .carousel .slide {
    position: relative;
  }

  .carousel .slide .description {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
  }

  .carousel .slide .description img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .carousel .slide .description p {
    margin: 0;
  }
</style>