Bootstrap 3 Carousel指示灯和控件不起作用?三重检查一切

时间:2015-04-02 08:25:35

标签: twitter-bootstrap-3 carousel

为什么旋转木马指示器或旋转木马控件在这里工作......

<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示例,它在我测试时起作用,而且它是相同的!

这一切都存在于以下网址: http://www.cairnsmorecottages.co.uk/rickwood/index.php

希望一些明亮的火花会发现明显的错误,因为这里显然有一个(我的概念?)!谢谢。

NJ

2 个答案:

答案 0 :(得分:0)

为什么来自DIV <div id="#myCarousel" class="carousel slide" data-ride="carousel">的ID包括&#39;#&#39;字符?

删除&#39;#&#39;来自id

评论后编辑:

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

https://jsfiddle.net/35esebmp/

答案 1 :(得分:0)

检查此解决方案,为我工作正常

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