Question

这是我的bootstrap轮播的代码，我的上一个和下一个按钮不起作用。我似乎无法看出问题所在。

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div id="img-slider" class="caroussel slide" data-ride="carousel"> 

        <!--  dots  -->

        <!-- wrapper for slides -->
        <div class="carousel-inner" role="listbox">  

           <div class="item active"> 
               <img src="img/MNB-1.jpg" class="img-responsive" alt="Responsive image"/>
            </div>

            <div class="carousel-caption"> 
                 <h1>University of Surrey Breakdancing society</h1>
            </div>

           <div class="item">  
              <img src="img/MNB-2.jpg"/>
           </div>

           <div class="item">  
              <img src="img/MNB-3.jpg"/>
           </div>

           <div class="item">  
              <img src="img/MNB-4.jpg"/>
           </div>

           <div class="item">  
              <img src="img/MNB-5.jpg"/>
           </div>
        </div>

        <!-- next and previous buttons -->
       <a class="left carousel-control" href="#img-slider" 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="#img-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
       </a>

    </div>
</div>

我将我的网站分成各种php页面，这些页面通过require或include链接在一起。也许这可能是一个需要考虑的因素，但我花了很多时间试图弄清楚发生了什么，但我不能指责它......

Answer 1

你的语法错了。字幕进入项目内部。

即。改变这个：

<div class="item active"> 
  <img src="img/MNB-1.jpg" class="img-responsive" alt="Responsive image"/>
</div>

<div class="carousel-caption"> 
  <h1>University of Surrey Breakdancing society</h1>
</div>

对此：

<div class="item active"> 
  <img src="img/MNB-1.jpg" class="img-responsive" alt="Responsive image"/>
  <div class="carousel-caption"> 
    <h1>University of Surrey Breakdancing society</h1>
  </div>
</div>

Answer 2

您有拼写错误：轮播，而不是 caroussel

<div id="img-slider" class="caroussel slide" data-ride="carousel">

应该是

<div id="img-slider" class="carousel slide" data-ride="carousel">

工作示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12">
  <div id="img-slider" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/2500x500/f00" alt="...">
      </div>
      <div class="item">
        <img src="http://placehold.it/2500x500/000" alt="...">
      </div>
    </div>

    <a class="left carousel-control" href="#img-slider" 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="#img-slider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootsrap 3旋转木马不工作

2 个答案: