Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issue? Below is the code snippet I am using:
$(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>