Bootstrap 轮播仅显示第一项。我在这里想念什么？答案

【问题标题】：Bootstrap carousel shows only first item. What am I missing here?Bootstrap 轮播仅显示第一项。我在这里想念什么？
【发布时间】：2015-06-21 04:14:39
【问题描述】：

我正在将引导轮播实现到我的页面中，但是我只能看到第一项（包含 3 个部分），而看不到其他两个。

在 bootply http://www.bootply.com/A465PmKBRm 中它正在工作，但在我的网站上却没有。用我正在使用的版本进行了测试。

我在这里错过了什么？

<div class="row">

                <div id="carousel-content" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#carousel-content" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-content" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-content" data-slide-to="2" class=""></li>
                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner">
                    <div class="item active">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                    </div>
                    <div class="item">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                    </div>
                    <div class="item">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                    </div>
                  </div>

                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                  </a>
                  <a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                  </a>
                </div>

        </div>

【问题讨论】：

恐怕我不知道如何解决这个问题。您发布了一个工作版本并询问它为什么不工作。很明显，你的生活环境有一些东西正在破坏它。页面是否有 404 或 JS 错误？
您好像缺少 bootstrap.js ？所以它只适用于布局（例如，带有“display:block”的活动类，但对于其他没有活动的“display:none”）
如果您解决了自己的问题，正确的做法是分享您的答案，以便其他人可以从您学到的知识中受益。
1.看来你没有添加结束js || 2. 链接
@Xalloumokkelos 您使用的是哪个浏览器？检查开发者控制台是否有任何错误并将其包含在您的问题中

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

正如 R Lam 在评论中所述，最可能的原因是您缺少 bootstrap.js 或以某种方式禁用了您网站上的 Javascript 执行（例如过于严格的 CSP 政策）。检查您的控制台中是否生成任何错误以及是否打开了 Javascript。这可能是因为没有 Javascript，bootstrap.css 文件将显示第一个轮播项目，但不允许切换到其他项目。

【讨论】：

【解决方案2】：

这个工作正常！

1.看来你没有添加结束js <script> codes </script> || 2. 链接

  <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Working! bootstrap-carousel</title>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    </head>

    <body>
    <div class="row">

                    <div id="carousel-content" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-content" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-content" data-slide-to="1" class=""></li>
                        <li data-target="#carousel-content" data-slide-to="2" class=""></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">
                        <div class="item active">
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                        </div>
                        <div class="item">
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                        </div>
                        <div class="item">
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            <h3>text</h3>
                                            <!-- SERVICE DESCRIPTION -->
                                            <p>description</p>
                                        </div>
                                        <!-- /END SINGLE SERVICE -->
                        </div>
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                      </a>
                    </div>

            </div>
            <script>
        // sandbox disable popups
        if (window.self !== window.top && window.name!="view1") {;
          window.alert = function(){/*disable alert*/};
          window.confirm = function(){/*disable confirm*/};
          window.prompt = function(){/*disable prompt*/};
          window.open = function(){/*disable open*/};
        }

        // prevent href=# click jump
        document.addEventListener("DOMContentLoaded", function() {
          var links = document.getElementsByTagName("A");
          for(var i=0; i < links.length; i++) {
            if(links[i].href.indexOf('#')!=-1) {
              links[i].addEventListener("click", function(e) {
              console.debug("prevent href=# click");
                  if (this.hash) {
                    if (this.hash=="#") {
                      e.preventDefault();
                      return false;
                    }
                    else {
                      var el = document.getElementById(this.hash.replace(/#/, ""));
                      if (el) {
                        el.scrollIntoView(true);
                      }
                    }
                  }
                  return false;
              })
            }
          }
        }, false);

      </script>

      <!--scripts loaded here-->

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body>
    </html>

【讨论】：

【解决方案3】：

检查以下内容

(1)确认您已经在代码中引用了 bootstrap.js，这是必不可少的，不要忘记 bootstrap.css。

(2)检查您的应用程序和其他第 3 部分 js 库文件，尤其是在您使用捆绑和缩小时。确保你用于缩小的任何东西都是正确的，因为如果不是这样，你的很多包含 bootstrap.js 的库可能会被搞砸，你会失去它们的功能

(3)您编写的任何其他 JavaScript 文件也必须检查是否有错误。

请为您的项目调试 JavaScript 错误。午餐 chrome 浏览器并按 F12，单击 F12 命令打开的开发人员视图中的控制台选项卡，然后在该选项卡中打开您的站点，看看您的 javascripts 文件是否有任何问题。

如您所见，您的引导轮播可以正常工作，但在包含其他库和可能您自己的 JavaScript 文件的站点中，它无法正常工作。

如果您在此处了解有关引导轮播问题的更多信息，请让人们支持并从中学习。

【讨论】：

【解决方案4】：

您只是错过了一些与您的页面链接的 JS 文件，这个例子会很好地解释你，W3school

【讨论】：