Bootstrap 3 Picture Carousel Stop滑动并返回第一张照片后

Question

我有一个图片轮播，显示在我页面的侧边栏部分。页面首次加载时轮播工作正常，但在返回幻灯片的第一张图片后停止工作。我在这里错过了什么吗？

//loading Jquery and bootstrap at the top of the page
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link href="../../Content/cosmo-boostrap.min.css" rel="stylesheet" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

我的HTML页面中的侧面部分代码：

<section id="sidebar" class="col-md-2">
                <div id="AddCarousel" class="carousel slide" data-ride="carousel" data-wrap="true">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#AddCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#AddCarousel" data-slide-to="1"></li>
                        <li data-target="#AddCarousel" data-slide-to="2"></li>
                        <li data-target="#AddCarousel" data-slide-to="3"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">
                        <div class="item active">
                          <img src="../../images/adds/Desert.jpg" alt="Desert">
                          <div class="carousel-caption">
                              <h3>Desert</h3>
                          </div>
                        </div>
                        <div class="item">
                          <img src="../../images/adds/koala.png" alt="Koala">
                          <div class="carousel-caption">
                              <h3>Koala</h3>
                          </div>
                        </div>
                        <div class="item">
                          <img src="../../images/adds/Jellyfish.jpg" alt="Jelly Fish">
                          <div class="carousel-caption">
                              <h3>Jelly Fish</h3>
                          </div>
                        </div>
                        <div class="item">
                          <img src="../../images/adds/Tulips.jpg" alt="Tulips">
                          <div class="carousel-caption">
                              <h3>Tulips</h3>
                          </div>
                      </div>
                  </div>
                      <!-- Controls -->
                     @* <a class="left carousel-control" href="#carousel-example-generic" role="button">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                      </a>*@
              </div> <!-- Carousel -->
            </section>

页面末尾的jQuery函数：

<script>
      $('.carousel').carousel({
        interval: 3000
      });
</script>

页面加载或刷新后，轮播看起来很好。见下图：

回到第一个旋转木马后，旋转木马显示两张照片并停止滑动。见下图：

Answer 1

我删除了下面的javascript代码，现在按预期工作了。

<script>
      $('.carousel').carousel({
        interval: 3000
      });
</script>