Question

按钮不能在我的引导转盘上工作，也不会转到其他图像。我没有更改Bootstrap CSS或JavaScript中的任何旋转木马。

到目前为止，这是我的代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="myCarousel" data-slide-to="1"></li>
    <li data-target="myCarousel" data-slide-to="2"></li>    
</ol>
<div class="carousel-inner">
    <div class="item active"><img src="images/oldman1.jpg" alt="First slide" style="height: 50%; width: 100%; display: block;">
    <div class="container">
        <div class="carousel-caption">
            <h1>Generations Apart</h1>
            <p>An Empathic Photo Essay</p>
            <button type="button" class="btn btn-default"><a href="Childhood.html">Begin</a>   </button>
            </div>
        </div>
    </div>
    <div class="item"><img src="images/oldman2.jpg" alt="Third slide" style="height: 50%; width: 100%; display: block;">
        <div class="container">
            <div class="carousel-caption">
            <h1>Generations Apart</h1>
            <p>An Empathic Photo Essay</p>
                <button type="button" class="btn btn-default"><a href="Childhood.html">Begin</a></button>
            </div>
        </div>
    </div>
    <div class="item"><img src="images/oldman.jpg" alt="Third slide" style="height: 50%; width: 100%; display: block;">
        <div class="container">
            <div class="carousel-caption">
            <h1>Generations Apart</h1>
            <p>An Empathic Photo Essay</p>
                <button type="button" class="btn btn-default"><a href="Childhood.html">Begin</a></button>
            </div>
        </div>
    </div>
</div> 

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

JS / CSS的链接：

 <!doctype html>
 <html>
     <head>
         <meta charset="utf-8">
         <script type="text/javascript" src="js/bootstrap.js"></script>
         <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
         <link href="css/custom.css" type="text/css" rel="stylesheet"/>
         <link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
         <title>Generations Apart</title>
    </head>

Answer 1

http://www.bootply.com/127038

很抱歉，您可以在这里看到您的代码运行良好，它可以毫无问题地运行轮播。

您确定要链接的JS和CSS文件正好在您链接的位置吗？

Bootstrap轮播不显示所有图像

1 个答案: