Question

我在设计中使用Bootstrap Carousel Element，因为我想按照link

的建议使用fade in Effect i扩展插件

现在Next和Prev按钮不起作用。

链接：http://play.mink7.com/suoll/v2

<div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions carousel_fade">
        <div class="carousel-inner">
          <div class="item"> <img alt="900x500" src="images/slider/img1.jpg">
            <div class="carousel-caption">
              <h3>First slide label</h3>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item active"> <img alt="900x500" src="images/slider/img2.jpg">
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="item"> <img alt="900x500" src="images/slider/img3.jpg">
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#carousel-example-captions " class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> 
        <a data-slide="next" href="#carousel-example-captions" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

Answer 1

观察你的代码我认为错误就在这里（错误的id分配）

 id="carousel-example-captions carousel_fade"

应该是

 id="carousel-example-captions" class="carousel_fade"

然后（也删除prev href属性末尾的空格）

<a data-slide="prev" href="#carousel-example-captions" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> 
<a data-slide="next" href="#carousel-example-captions" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

以这种方式，prev和next的href中的id应该起作用

Bootstrap Carousel Next Prev Link不起作用

1 个答案: