Bootstrap 3.3 Carousel - 3张图片一张一张地滑动

Question

我想显示 3 个缩略图和箭头的 onClick，它一次只能滚动一个...对于 3.3 版，它一次滚动 3 个缩略图...（但它显示的正是之后我想要什么。）。我该如何解决这个问题。

  <div class="container">
    <div class="row">
        <div class="span12">
            <div class="well">
                <div id="myCarousel" class="carousel fdi-Carousel slide">
                 <!-- Carousel items -->
                    <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
                        <div class="carousel-inner onebyone-carosel">
                            <div class="item active">
                                <div class="col-md-4">
                                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                                    <div class="text-center">1</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                                    <div class="text-center">2</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                                    <div class="text-center">3</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                                    <div class="text-center">4</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                                    <div class="text-center">5</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                                    <div class="text-center">6</div>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
                        <a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
                    </div>
                    <!--/carousel-inner-->
                </div><!--/myCarousel-->
            </div><!--/well-->
        </div>
    </div>
</div>

En de javascript:

$(document).ready(function () {
$('#myCarousel').carousel({
    interval: 10000
})
$('.fdi-Carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

});

JSFiddle：http://jsfiddle.net/Luuw070f/

Answer 1

这里是transform 属性的解决方法

http://jsfiddle.net/rewobs/Luuw070f/4/