我Bootstrap carousel
在我的网页中使用,但控制台显示此错误:
TypeError: $(...).carousel is not a function
我已经导入了bootstrap.js
and jquery-1.8.3.min.js
,但是页面加载时轮播没有滑动,现在我无法理解问题所在。这是我的代码:
<script src="bootstrap.js"></script>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$('#myCarousel').carousel({
interval: 2000
})
</script>
正文语法:
<div>
<center>
<div id="myCarousel" class="carousel slide" style="width:800px; height:400px;">
<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="active item"><img style="width:800px; height:400px" src="img/c4.jpg">
<div class="carousel-caption">
<h4>Heading</h4>
<p>like never before...</p>
</div>
</div>
<div class="item"><img style="width:800px; height:400px" src="img/c3.jpg"></div>
<div class="item"><img style="width:800px; height:400px" src="img/c3.jpg"></div>
<div class="item"><img style="width:800px; height:400px" src="img/c4.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</center>
</div>