Html 引导转盘不'；我不能正常工作

我的页面上有一个引导转盘，它不能正常工作。我正在显示数据库中的6个项目，但我只想在第一个旋转木马页面上显示3个项目，然后在下一个页面上显示3个项目。但是，它显示的是在一个页面上折叠的所有项目

这是我的代码

<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">
                                    <a href="#"><img src="some image src"></a>
                                </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>

哪里似乎有问题

ul.缩略图{
边缘底部：0px；
}
.标题h4{
颜色：#444；
文本对齐：居中！重要；
}
.标题p{
颜色：#999；
}
李{
列表样式类型：无；
}
#标题值{
背景色：浅灰色！重要；
边缘底部：20px；
}
@介质（最大宽度：767px）{
.页眉，.控制框{
文本对齐：居中；
}
}
@介质（最大宽度：479px）{
.标题{
单词break：打破一切；
}
}
缩略图{
填充：0；
}

你能创建一个JSFIDLE演示或任何工作示例吗？我怀疑是否有可能制作JSFIDLE，因为它不会显示任何内容，因为它从数据库@SanjeevKyes获取数据，所以可以作为旋转木马滑块工作…但它仍然在第一页显示所有6项…然后在下一页显示6项…即12项，尽管数据库中只有6项。它正在复制it@fokz8，这是因为要添加重复循环两次。就用一次。我添加了另一张幻灯片以显示效果。还需要在滑块中添加多少项？

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;
}