swiper轮播图添加文字

要在Swiper轮播图中添加文字，可以通过以下步骤实现：

1. 在轮播图的每个slide中添加一个文字容器，例如一个div元素，可以使用绝对定位将其定位在合适的位置。

2. 在CSS中为文字容器设置样式，例如设置背景色、边框、字体大小、颜色等。

3. 在JavaScript中使用Swiper实例的on('slideChange', function () {...})方法，来监听轮播图的滑动事件。

4. 在滑动事件中动态更新文字容器的内容，例如根据当前slide的索引值来显示相应的文字内容。

以下是一个示例代码：

HTML：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="image1.jpg">
      <div class="caption">这是第一张图片</div>
    </div>
    <div class="swiper-slide">
      <img src="image2.jpg">
      <div class="caption">这是第二张图片</div>
    </div>
    <div class="swiper-slide">
      <img src="image3.jpg">
      <div class="caption">这是第三张图片</div>
    </div>
  </div>
</div>

CSS：

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  text-align: center;
}

JavaScript：

var swiper = new Swiper('.swiper-container', {
  // 其他配置项
});

swiper.on('slideChange', function () {
  var index = swiper.activeIndex;
  var caption = document.querySelector('.swiper-slide-active .caption');
  caption.innerHTML = '这是第' + (index + 1) + '张图片';
});

在这个示例中，我们在每个slide中添加了一个名为“caption”的div元素，用于显示文字内容。在CSS中，我们将其定位在底部，并设置了样式。在JavaScript中，我们监听了Swiper的slideChange事件，每次滑动时更新当前slide的文字内容。