在bootstrap轮播中一次显示多张幻灯片

Question

我有一个通过评论列表自动播放的轮播。我需要调整它，以便在第一次加载时，您还会看到下一次审核的一半。如果审核处于中间位置，您应该能够看到上一次审核的后半部分以及以下审核的前半部分。我需要它也能顺利滑动，如果可能的话，不要只是点击下一张幻灯片。

HTML

<div class="container content best-of-container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-xs-12">
                    <div class="thumbnail adjust1">
                        <div class="col-md-2 col-sm-2 col-xs-12">
                            <img class="media-object img-rounded img-responsive" src="http://placehold.it/100">
                        </div>
                        <div class="col-md-10 col-sm-10 col-xs-12">
                            <div class="caption">
                                <p class="text-info lead adjust2">I can't wait to test this out.</p>
                                <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                <blockquote class="adjust2">
                                    <p>Tester McTesty</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.domain.com</cite></small> 
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-12">
                    <div class="thumbnail adjust1">
                        <div class="col-md-2 col-sm-2 col-xs-12">
                            <img class="media-object img-rounded img-responsive" src="http://placehold.it/100">
                        </div>
                        <div class="col-md-10 col-sm-10 col-xs-12">
                            <div class="caption">
                                <p class="text-info lead adjust2">I can't wait to test this out.</p>
                                <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                <blockquote class="adjust2">
                                    <p>Testella McShanty</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.domain2.com</cite></small> 
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-12">
                    <div class="thumbnail adjust1">
                        <div class="col-md-2 col-sm-2 col-xs-12">
                            <img class="media-object img-rounded img-responsive" src="http://placehold.it/100">
                        </div>
                        <div class="col-md-10 col-sm-10 col-xs-12">
                            <div class="caption">
                                <p class="text-info lead adjust2">I can't wait to test this out.</p>
                                <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                <blockquote class="adjust2">
                                    <p>John Doe</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.domain3.com</cite></small> 
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</div>

CSS

.carousel-indicators .active {
    background: #31708f;
}
.content {
    margin-top:20px;
}
.adjust1 {
    float:left;
    width:100%;
    margin-bottom:0;
}
.adjust2 {
    margin:0;
}
.carousel-indicators li {
    border :1px solid #ccc;
}
.carousel-control {
    color:#31708f;
    width:5%;
}
.carousel-control:hover, .carousel-control:focus {
    color:#31708f;
}
.carousel-control.left, .carousel-control.right {
    background-image: none;
}
.media-object {
    margin:auto;
    margin-top:15%;
}

当前小提琴：LINK