Question

我已经复制了下面的HTML-我不知道为什么，但是当我在浏览器中打开它时，它会停留在第一个图像上并且不会转换...我已经包含了我的html下面的所有代码。 CSS和JS文件是提供的通用引导程序文件。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap test site</title>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    $(document).ready(function(){
        $('.carousel').carousel();
    });
    </script>



</head>

<body>
    <div class="container">

    <div class="span8"> <img src="img/logo_title.png"> </div> 

        <div>

            <div id="this-carousel-id" class="carousel slide">
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here1</p>
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here2</p>
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here3</p>
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here4</p>
                  </div>
                </div>
              </div><!-- /.carousel-inner -->
              <!--  Next and Previous controls below
                    href values must reference the id for this carousel -->
                <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
            </div><!-- /.carousel -->
        </div>  

    </div>

<script src="js/bootstrap.js"></script>


</body>
</html>

Answer 1

对于bootstrap中的任何JS库，请确保包含实际库。在您的情况下，您遗漏了轮播库。其他需要单独的js文件的Bootstrap附加组件包括模态，下拉和工具提示。将其添加到：

 <script src="/js/bootstrap-carousel.js"></script>
<script src="/js/jquery.js"></script>

你还包括bootstrap.js两次。

Twitter Bootstrap-无法让Carousel更改图像

1 个答案: