Bootstrap Carousel无法正常工作

Question

我试图弄清楚为什么我的网站中的轮播不再起作用了，以前曾经起作用，但是我不知道我对编码做了什么，现在不起作用了。

这是我的代码：

 <div class="container text-center"> <section> <h2>&nbsp; </h2> <h2> <strong>IPhone 6 features image gallery </strong></h2> <div class="carousel slide" id="screenshot-carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li> <li data-target="#screenshot-carousel" data-slide-to="1"></li> <li data-target="#screenshot-carousel" data-slide-to="2"></li> <li data-target="#screenshot-carousel" data-slide-to="3"></li> <li data-target="#screenshot-carousel" data-slide-to="4"></li> <li data-target="#screenshot-carousel" data-slide-to="5"></li> <li data-target="#screenshot-carousel" data-slide-to="6"></li> <li data-target="#screenshot-carousel" data-slide-to="7"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/image slider/1.iphone 6 & 6 plus.png" alt="Introducing the new IPhone 6 & IPhone 6 Plus"> <div class="carousel-caption"> </div> <div class="item"> <img src="img/image slider/2.camera.png" alt="All new sensors"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/image slider/3.camera .png" alt="Improved camera"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/image slider/4. touch id.png" alt="Security. Right at your fingertip with Touch ID"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/image slider/5.ios 8.png" alt="Introducing the new IOS"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/image slider/6.thin.png" alt="Extremely thin"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/image slider/7.powerful chip.png" alt="Hugely powerpul and enormously efficient"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/image slider/8.bigger screen.png" alt="Bigger screen"> <div class="carousel-caption"> </div> <a href="#screenshot-carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#screenshot-carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- End Carousel --> 

Answer 1

您的div错误关闭了

<div class="item active">
          <img src="img/image slider/1.iphone 6 &  6 plus.png" alt="Introducing the new IPhone 6 & IPhone 6 Plus">
          <div class="carousel-caption">
          </div>

加：

</div>

检查示例： http : //jsfiddle.net/6p2snav9/1/

<div class="container text-center">

    <h2>&nbsp; </h2>
    <h2> <strong>IPhone 6 features image gallery </strong></h2>

    <div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#screenshot-carousel" data-slide-to="1"></li>
            <li data-target="#screenshot-carousel" data-slide-to="2"></li>
            <li data-target="#screenshot-carousel" data-slide-to="3"></li>
            <li data-target="#screenshot-carousel" data-slide-to="4"></li>
            <li data-target="#screenshot-carousel" data-slide-to="5"></li>
            <li data-target="#screenshot-carousel" data-slide-to="6"></li>
            <li data-target="#screenshot-carousel" data-slide-to="7"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://lorempixel.com/400/400/sports/1" alt="Introducing the new IPhone 6 & IPhone 6 Plus">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/2" alt="All new sensors">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/3" alt="Improved camera">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/8" alt="Security. Right at your fingertip with Touch ID">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/4" alt="Introducing the new IOS">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/5" alt="Extremely thin">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/6" alt="Hugely powerpul and enormously efficient">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/400/400/sports/7" alt="Bigger screen">
                <div class="carousel-caption">
                </div>
            </div>
            <a href="#screenshot-carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#screenshot-carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

        </div>

    </div>


</div>