Bootstrap幻灯片无法正常工作

Question

我的自举幻灯片放映不起作用，我想知道如何修复它，当我点击它将自己开始的下一个箭头，但从一开始它不会去这是我的代码吗？
这段代码是我幻灯片放映的html。

<!--  Carousel - consult the Twitter Bootstrap docs at http://twitter.github.com/bootstrap/javascript.html#carousel -->

<div class="carousel slide" id="this-carousel-id">
    <!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active">
      <!-- class of active since it's the first item -->
      <img alt="group photo of band" src="slides/group_photo.jpg">
      <div class="carousel-caption"></div>
    </div>
    <div class="item">
      <img alt="photo of kellin quinn" src="slides/kellin_quinn.jpg">
      <div class="carousel-caption"></div>
    </div>
    <div class="item">
      <img alt="photo of Jack Fowler" src="slides/jack_fowler.jpg">
      <div class="carousel-caption"></div>
    </div>
    <div class="item">
      <img alt="photo of Gabe Barham" src="slides/gabe_barham.jpg">
      <div class="carousel-caption"></div>
    </div>
    <div class="item">
      <img alt="please stay" src="slides/please_stay.jpg">
      <div class="carousel-caption"></div>
    </div>
    <div class="item">
      <img alt="things won't be broken" src="slides/thing_won't_be_broken.jpg">
      <div class="carousel-caption"></div>
    </div>
  </div>
  <!-- /.carousel-inner -->
  <!--  Next and Previous controls below href values must reference the id for this carousel -->
  <a class="carousel-control left" data-slide="prev" href="#this-carousel-id">‹</a> 
  <a class="carousel-control right" data-slide="next" href="#this-carousel-id">›</a>
</div>
<!-- /.carousel -->

此部分是我幻灯片的CSS。

/* slideshow */
a.carousel-control
{
  top: 45%;
  left: 8px;
  width: 40px;
  height: 40px;
  margin-top: 0px;
  font-size: 48px;
  font-weight: 100;
  line-height: 30px;
  color: #fff;
  text-align: center;
  background: #222;
  border: 3px solid #fff;
  border-radius: 50%;
  opacity: 0.3;
}
a.carousel-control.right
{
  right:0px;
}
.carousel-caption
{
  display: none;
}
.item.active:hover > .carousel-caption
{
  opacity:0.8;
}
ol.carousel-indicators
{
  top:0px;
  left:52px;
  display:inline-block;
  height:16px;
}
.carousel-indicators li
{
  border-color:#888;
  opacity:0.3;
  border-width:2px;
  width:5px;
  height:5px;
}
.carousel-indicators li.active
{
  width:7px;
  height:7px;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-left: 5%;
}
.img-responsive, 
.thumbnail>img, 
.thumbnail a>img, 
.carousel-inner>.
item>img, 
.carousel-inner>.
item>a>img{
    display: block;
    max-width: 90%;
    height: auto;
}

此部分是我用于幻灯片放映的java。

<script type='text/javascript'>
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 2000
    })
  });    
</script>

提前感谢您的帮助。