如何使用bootstrap轮播实现带有标题的图像滑块

Question

我的w页面内置了bootstrap以提供响应，网站的第一部分包含带有标题的图像幻灯片显示为以下结构

<div class="row carousel slide" id="main-slider" data-ride="carousel">
    <div class="col-md-6">
        <div class="carousel-inner">
            <div class="item active">
              <img class="slide-image" src="..."/>
            </div>
            <div class="item">
              <img class="slide-image" src="..."/>
            </div>
            <div class="item">
              <img class="slide-image" src="..."/>
            </div>
        </div>
    </div>
    <div class="col-md-6">
      <ol class="carousel-indicators">
         <li data-target="#main-slider" data-slide-to="0" class="active"></li>
         <li data-target="#main-slider" data-slide-to="1"></li>
         <li data-target="#main-slider" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
          <div class="item  active">
              <p>caption1</p>
          </div>
          <div class="item">
              <p>caption2</p>
          </div>
          <div class="item">
              <p>caption2</p>
          </div>
      </div>
    </div>
</div>

但问题是，在第一轮自动滑块之后，标题消失（类活动已删除），但图像滑块运行良好且不会停止。

jsfiddle

上的示例链接

我怎么能解决这个问题？无论如何要用旋转木马做到这一点并保持响应？