我是JavaScript的初学者,我对此演示网站有以下疑问:http://www.html.it/guide/img/bootstrap/demo/home.html
正如您在主页标题中所看到的,幻灯片显示了一个由此HTML部分创建的名为 FlexSlider 的 JQuery 插件:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span>
<br>
<span>sit dolor</span>
<br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span>
<br>
<span>sit dolor</span>
<br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span>
<br>
<span>sit dolor</span>
<br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
</div><!-- /.col-sm-12 -->
</div><!-- /.row -->
我的疑问是:我有HTML部分代表幻灯片, FlexSlider Javascript由此行加载:
<script src="assets/plugins/flexslider/jquery.flexslider.js"></script>
但是我找不到调用FlexSlider来构建幻灯片的地方?
我希望有类似的东西:
$(document).ready(function(){
$('.flexslider').flexslider({option1: value, option2: value});
});
我错过了什么?为什么会这样?
TNX
安德烈
答案 0 :(得分:2)
你期望在那里的代码确实存在。它只是在一个单独的.js文件中,而不是在页面的HTML中。从加载插件的<script>
标记向下两行是:
<script src="assets/js/scripts.js"></script>
在该文件中:
/* Slider */
$(window).load(function() {
$('#main-slider').flexslider({
animation: "slide",
useCSS: false,
pauseOnHover: true
});
});