引导轮播jQuery错误 [英] Bootstrap carousel jQuery error
本文介绍了引导轮播jQuery错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作多个项目的引导轮播，但它给了我这个错误:"#Carousel" .carousel不是函数TypeError:"#Carousel" .carousel不是函数，如何解决? 这是我的代码:
$(document).ready(function () {
('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
</div>
</div> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>
解决方案
从粘贴的代码中，我看不到您正在加载Bootstrap库(css和js代码).您可以在此处 http://getbootstrap.com/getting-started/ 中查看Bootstrap加载信息. >
I'm trying to make a multiple items bootstrap carousel but it gives me this error: "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function, how can fix it? here is my code:
$(document).ready(function () {
('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
</div>
</div> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>
解决方案
From the code you pasted, I cannot see that you are loading Bootstrap library (css and js code). You can see Bootstrap loading information here http://getbootstrap.com/getting-started/
这篇关于引导轮播jQuery错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
