引导缩略图不起作用答案

【问题标题】：bootstrap thumbnails not working引导缩略图不起作用
【发布时间】：2015-09-12 14:10:52
【问题描述】：

我正在尝试为缩略图创建一个轮播。旋转木马已制成，但无法正常工作。就像我无法单击下一个和上一个按钮一样，这些按钮显示在轮播顶部的每一侧。请帮帮我。以下是我的代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>

         <link href="css/bootstrap.min.css" rel="stylesheet">
         <link href="css/carousel.css" rel="stylesheet">
         </head>
<body>
        <div class="container-fluid">
        <div class="row">
        <div class="col-md-12">
            <div class="well"> 
                <div id="myCarousel" class="carousel slide">

                <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>

                <!-- Carousel items -->
                <div class="carousel-inner">

                <div class="item active">
                    <div class="row-fluid">
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                <div class="item">
                    <div class="row-fluid">
                        <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                <div class="item">
                    <div class="row-fluid">
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                </div><!--/carousel-inner-->

                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                </div><!--/myCarousel-->

            </div><!--/well-->   
        </div>
    </div>
</div>

        <script src="/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="/js/lightbox.min.js"></script>
        <script src="/js/jquery-1.11.3.min.js"></script>
        <script src="/js/carousel.js"></script>
</body>
</html>

【问题讨论】：

您能否为此设置一个 codepen.io，因为在我看到它并摆弄它之前需要添加几个外部资源，否则一个实时站点可以正常工作
<script src="/js/bootstrap.min.js"></script> 必须追随jQuery。另外，不要重复 jQuery 包含，使用一个:)

标签： javascript jquery css twitter-bootstrap thumbnails

【解决方案1】：

Working bootply right here

您的代码运行良好，我相信您的问题来自 js 文件。您正在复制 JQuery。检查您的控制台，您可能遇到了错误：

未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery

您应该按此顺序包含您的文件：

jQuery
引导程序

你的 Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/lightbox.min.js"></script>
<script src="/js/carousel.js"></script>

编辑：在评论中他提到资源无法加载。得到错误：

不允许加载资源....

这是 chrome 的问题。 Someone had the same issue here.

【讨论】：

@Coading Enthusiast 我尝试了您的建议，但仍然无法正常工作。我仍然无法切换到另一张幻灯片。
@coading 我尝试了您的建议，但仍然无法单击下一张或上一张幻灯片。更多我在控制台中遇到错误，例如“不允许加载本地资源”不允许加载本地资源：file:///G:/carousel/index.html
@user3465377 已编辑答案，其中包含一个可以解决该问题的链接