Bootstrap carousel doesn't work correctly - html

Question

I have a Bootstrap carousel on my page and it's not working correctly. I'm displaying 6 items from my database, but I only want 3 items on first carousel page and then 3 on next. But instead, it's showing all of the items collapsed on a single page.
here is my code
<div class="row">
<div class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails" data-bind="foreach: myMovies">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<img src="some image src">
</div>
<div class="caption">
<h4 data-bind="text: Movies().Title"></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
</div>
</div>
and my css
img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
text-align: center !important;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#caption-value {
background-color: lightgray !important;
margin-bottom: 20px;
}
#media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
#media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
ul.thumbnails {
padding: 0;
}
Where seems to be a problem?

Answer 1

ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
text-align: center !important;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#caption-value {
background-color: lightgray !important;
margin-bottom: 20px;
}
#media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
#media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
ul.thumbnails {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<ul class="thumbnails" data-bind="foreach: myMovies">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<img src="http://placehold.it/200x50">
</div>
<div class="caption">
<h4 data-bind="text: Movies().Title"></h4>
</div>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails" data-bind="foreach: myMovies">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<img src="http://placehold.it/200x50">
</div>
<div class="caption">
<h4 data-bind="text: Movies().Title"></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
</div>