Bootstrap 3 轮播指示器和控件不工作？三重检查一切

Question

为什么轮播指示器或轮播控件在这里不起作用...

<div id="#myCarousel" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>

<div class="carousel-inner" role="listbox">

   <div class="item active" id="slide1">
      <div class="container">
        <div class="carousel-caption">
          <h2>Title</h2>
          <p>Text...p>
          <p><a class="btn btn-md btn-success" href="#" role="button">Button</a></p>
        </div>
      </div>
    </div>

    <div class="item" id="slide2">
      <div class="container">
        <div class="carousel-caption">
          <h2>Factors Suite</h2>
          <p>Enjoy a luxury stay in the Factors Suite which features furniture crafted from reclaimed timber and works by contemporary Scottish artists.</p>
          <p><a class="btn btn-md btn-info" href="#" role="button">View Gallery</a></p>
        </div>
      </div>
    </div>

</div><!-- end carousel-inner -->

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

</div><!-- end carousel -->

在我的页面底部有：

<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>

我试过使用 bootstrap.js 来代替 - 这不起作用。这让我很生气，因为我有来自 Bookstrap 3 网站的 Carousel 示例，它在我测试时有效，而且完全相同！

这一切都在以下直播URL： http://www.cairnsmorecottages.co.uk/rickwood/index.php

希望一些明亮的火花能够发现明显的错误，因为这里显然有一个错误（我的构想？）！谢谢。

新泽西

Answer 1

为什么来自 DIV <div id="#myCarousel" class="carousel slide" data-ride="carousel"> 的 ID 包含“#”字符？

从 ID 中删除“#”

评论后编辑：

查看您的 html div 标签。您可以将您的 html 与此进行比较：

https://jsfiddle.net/35esebmp/

Answer 2

检查这个解决方案，对我来说工作正常

$(document).ready(function(e) {
          $(".carousel-indicators").click(function(){ 
            $(".carousel").carousel('prev');
          })
          $(".left").click(function(){ 
            $(".carousel").carousel('prev');
          })
          $(".right").click(function(){ 
            $(".carousel").carousel('next');
          })
        });

Bootstrap 3 轮播指示器和控件不工作？三重检查一切

Bootstrap 3 Carousel indicators and controls not working? Triple checked everything

carousel

twitter-bootstrap-3