旋转木马标题用于随幻灯片移动但停止

Question

所以我在每张幻灯片下面都有一个旋转木马标题，它随着幻灯片的移动而移动，好像整个页面都是旋转木马，但从一天到下一天它刚刚停止，我不知道如何修复它请救命。 这是我的轮播代码：

            <div class="carousel-inner">
  <div class="item active">
    <img src="images/wisp.png" alt="WISP" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("wisp.html") ?>       
      </div>
  </div>


  <div class="item">
    <img src="images/linkme.png" alt="linkme" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("linkme.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/zainent.png" alt="zain" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("zainent.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/tahadi.png" alt="tahadi" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("tahadi.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/onelife.png" alt="onelife" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("onelife.html") ?>
      </div>
  </div>


<div class="item">
    <img src="images/alavina.png" alt="alavina" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("alavina.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/iha.png" alt="iha" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("iha.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/runnuts.png" alt="runnuts" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("runnuts.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/oliviafred.png" alt="oliviafred" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("oliviafred.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/bandicoot.png" alt="bandicoot" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("bandicoot.html") ?>
      </div>
  </div>


  <div class="item">
    <img src="images/bassama.png" alt="bassama" style="width:100%;">
    <div class="carousel-captionn">
        <?php include("bassama.html") ?>
      </div>
  </div>
</div>



<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>      
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>     
</a>
</div>
</div>       
     <div id="text"></div>

这是我的剧本：

        $('#text').html($('.active > .carousel-captionn').html());
       $('.carousel').on('slid.bs.carousel', function () {
      $('#text').html($('.active > .carousel-captionn').html());
      });

这是carousel-captionn的css：

.carousel-captionn{
        display: none !important;
}

如果我使用bootstrap中的正常“carousel-caption”，则标题与幻灯片对齐（越过它们） 提前感谢您的帮助！