Javascript 如何使用引导旋转木马实现带标题的图像滑块

我有一个w页建立与引导是响应，网站的第一部分包含一个图像幻灯片与标题如下结构

<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>

标题1

标题2

标题2

但问题是，在第一轮自动滑动之后，标题消失了（活动类被删除），但图像滑动效果良好，不会停止

示例链接

---

我怎样才能解决这个问题？有没有办法用旋转木马做到这一点并保持其响应速度？

js fiddle可能会帮助我们快速解决问题我尽可能做到了，为什么有两个旋转木马（旋转木马内部）？你不想要这样的东西吗：不，我不想要照片下面的标题，看看问题中的图像，它在全宽模式下响应，图像将位于标题旁边，在移动模式下，图片幻灯片下面的标题@阿奎那只要去掉拇指。