我使用了bootstrap carousel滑块插件,但似乎没有用。我使用此示例稍微修改了引导代码:file:/// C:/Users/wangsi/Desktop/corlate-free-responsive-business-html-template/index.html
请参阅我的小提琴示例: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>
答案 0 :(得分:1)
我看了你的小提琴,从我的角度来看似乎一切都很好。所以我查看了console
,我意识到你没有加载JQuery。
你可能想先从那里开始。 Bootstrap Js需要Jquery
。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.6/jquery.min.js"></script>
编辑:看看你正在加载的文件,那里没有任何东西可以尖叫JQuery。所以我建议你在加载BootstrapJs之前加载JQuery文件。