javascript - 我的 Bootstrap 轮播 slider 不工作

Question

我使用了 bootstrap carousel slider 插件，但它似乎不起作用。我确实使用这个示例稍微修改了 Bootstrap 代码:file:///C:/Users/wangsi/Desktop/corlate-free-responsive-business-html-template/index.html

请参阅我在 fiddle 上的示例:JsFiddle

<section id="main-slider" class="no-margin wow fadeInDown">
        <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
          <i class="fa fa-chevron-left"></i>
        </a>
        <a class="next hidden-xs" href="#main-slider" data-slide="next">
          <i class="fa fa-chevron-right"></i>
        </a>
        <div class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
                <li data-target="#main-slider" data-slide-to="0" class="active"></li>
                <li data-target="#main-slider" data-slide-to="1"></li>
                <li data-target="#main-slider" data-slide-to="2"></li>
            </ol>

          <div class="engineering-section">
            <div class="engineering-section-title title-text text-center">Engineering</div>
              <div class="down-button bounceInDown animated">
                  <a class="next-down-chevron" href="#"><i class="fa fa-chevron-down"></i></a>
              </div>

        <div class="carousel-inner">

            <div class="item active">
              <div class="card-container">
                <div class="col-md-4">
                  <div class="card-section">
                    <div class="mdl-card__media">
                      <img src="img/engineer-1.jpg">
                    </div>
                    <div class="mdl-card__supporting-text">
                      <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
                      <div class="checksum">
                        <a class="info_checksum" href="#">Checksum</a>
                      </div>
                    </div><!--end supporting text-->
                    <div class="card_actions">
                       <a class="card-links" href="#">
                         Download Now
                         <i class="fa fa-chevron-right"></i>
                       </a>
                    </div><!--end card_actions-->
                  </div><!--end card-section-->
                </div>

              <div class="col-md-4">
                 <div class="card-section">
                  <div class="mdl-card__media">
                    <img src="img/engineer-2.jpg">
                  </div>
                  <div class="mdl-card__supporting-text">
                    <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
                    <div class="checksum">
                    <a class="info_checksum" href="#">Checksum</a>
                    </div>
                  </div>
                  <div class="card_actions">
                     <a class="card-links" href="#">
                       Download Now
                       <i class="fa fa-chevron-right"></i>
                     </a>
                  </div><!--end card_actions-->
                </div><!--end card-section-->
              </div>

              <div class="col-md-4">
                <div class="card-section"> 
                <div class="mdl-card__media">
                  <img src="img/engineer-3.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
                  <div class="checksum">
                    <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>
                </div><!--end card_actions-->
              </div><!--end card-section-->
           </div><!--end col-md-4-->  
        </div><!--end card-container-->
      </div>
      <div class="item">
        <div class="card-container content-one">
                <div class="col-md-4">
                  <div class="card-section">
                    <div class="mdl-card__media">
                      <img src="img/1.jpg">
                    </div>
                    <div class="mdl-card__supporting-text">
                      <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
                      <div class="checksum">
                        <a class="info_checksum" href="#">Checksum</a>
                      </div>
                    </div><!--end supporting text-->
                    <div class="card_actions">
                       <a class="card-links" href="#">
                         Download Now
                         <i class="fa fa-chevron-right"></i>
                       </a>
                    </div><!--end card_actions-->
                  </div><!--end card-section-->
                </div>

              <div class="col-md-4">
                 <div class="card-section">
                  <div class="mdl-card__media">
                    <img src="img/2.jpg">
                  </div>
                  <div class="mdl-card__supporting-text">
                    <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
                    <div class="checksum">
                    <a class="info_checksum" href="#">Checksum</a>
                    </div>
                  </div>
                  <div class="card_actions">
                     <a class="card-links" href="#">
                       Download Now
                       <i class="fa fa-chevron-right"></i>
                     </a>
                  </div><!--end card_actions-->
                </div><!--end card-section-->
              </div>

              <div class="col-md-4">
                <div class="card-section"> 
                <div class="mdl-card__media">
                  <img src="img/3.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
                  <div class="checksum">
                    <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>
                </div><!--end card_actions-->
              </div><!--end card-section-->
           </div><!--end col-md-4-->  
        </div><!--end card-container-->
      </div>
    </div><!--end engineering-->
  </div>
 </div>

</section>

Answer 1

JsFiddle

我看了看你的 fiddle ，从我的 Angular 来看似乎一切都很好。所以我查看了 console 并意识到您没有加载 JQuery。您可能想先从那里的某个地方开始。 Bootstrap Js 需要 Jquery。

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

---

编辑:看看你正在加载的文件，里面没有任何东西可以尖叫 JQuery。所以我建议你在加载 BootstrapJs 之前加载 JQuery 文件。