当bootstrap滑块图片处于活动状态时，更改div中的文本

Question

我正在使用引导滑块，对于幻灯片上的每张图片，幻灯片下方div中的文字会随着不同的信息而改变。

我一直在尝试像这样定位bootstrap的活动滑块;

$('#myCarousel').on('slide.bs.carousel', function(){
  var id = ev.relatedTarget.id;
  switch (id) {
    case "easy":
      document.getElementById('#container1');
      $('#container1').show();
      break;

    case "3":
      break;

    case "3":
      break;

    default:

  }
});

没有运气。如果需要澄清，请参阅我的html for bootstrap slider。

<!-- Wrapper for slides -->
<center>
<div class="carousel-inner" role="listbox">
  <div id="easy" class="item active">
    <img src="skeleton.png" alt="Chania">
  </div>

  <div id="medium" class="item">
    <img src="creeper.png" alt="Chania">

  </div>

  <div id="hard" class="item">
    <img src="enderman.png" height="200" width="200" alt="Flower">
  </div>

  <div id="extreme" class="item">
    <br>
    <br>
    <br>
    <img class="slime animated infinite bounce" src="slime.png" height="200" width="200" alt="Flower">
  </div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

那我该怎么办呢？