Bootstrap 3轮播显示多个面板

Question

我有一个使用carosel的网站，但我希望左边和右边的下一个项目部分可见。

正如您所看到的，我在空白页面上有所需的效果，但在将其移植到它时表现得很奇怪。

这是我用过的代码。

HTML

<section id="one">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 center-block">
                    <div class="carousel slide" id="c1">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li class="active" data-slide-to="0" data-target=
                            "#c1"></li>
                            <li data-slide-to="1" data-target="#c1"></li>
                            <li data-slide-to="2" data-target="#c1"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-4">
                                    <div class="panel">
                                        <a href="news-article.php">
                                        <div class="panel-img"><img alt=""
                                        height="370" src="img/home/saw-man.png"
                                        width="370"></div>
                                        <div class="panel-content">
                                            <p class="category-name">
                                            111111111e</p>
                                            <p class="title">Lorem ipsum dolor
                                            sit amet, iscing elit.
                                            conseceteur.</p>
                                            <p class="subtext">Lorem ipsum
                                            dolor sit amet, consectetur adipisc
                                            elit. Aenean euismod bibend... um
                                            laoreet. Proin gravida dolor sit
                                            amet lacus accumsan et viverra
                                            justo commodo.</p>
                                        </div></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4">
                                    <div class="panel">
                                        <a href="news-article.php">
                                        <div class="panel-img"><img alt=""
                                        height="370" src="img/home/saw-man.png"
                                        width="370"></div>
                                        <div class="panel-content">
                                            <p class="category-name">
                                            2222222</p>
                                            <p class="title">Lorem ipsum dolor
                                            sit amet, iscing elit.
                                            conseceteur.</p>
                                            <p class="subtext">Lorem ipsum
                                            dolor sit amet, consectetur adipisc
                                            elit. Aenean euismod bibend... um
                                            laoreet. Proin gravida dolor sit
                                            amet lacus accumsan et viverra
                                            justo commodo.</p>
                                        </div></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4">
                                    <div class="panel">
                                        <a href="news-article.php">
                                        <div class="panel-img"><img alt=""
                                        height="370" src="img/home/saw-man.png"
                                        width="370"></div>
                                        <div class="panel-content">
                                            <p class="category-name">
                                            3333333333333333</p>
                                            <p class="title">Lorem ipsum dolor
                                            sit amet, iscing elit.
                                            conseceteur.</p>
                                            <p class="subtext">Lorem ipsum
                                            dolor sit amet, consectetur adipisc
                                            elit. Aenean euismod bibend... um
                                            laoreet. Proin gravida dolor sit
                                            amet lacus accumsan et viverra
                                            justo commodo.</p>
                                        </div></a>
                                    </div>
                                </div>
                            </div>
                        </div><a class="left carousel-control" data-slide=
                        "prev" href="#c1"><i class=
                        "glyphicon glyphicon-chevron-left"></i></a> <a class=
                        "right carousel-control" data-slide="next" href=
                        "#c1"><i class=
                        "glyphicon glyphicon-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

.carousel {
                overflow: hidden;
            }
            .carousel-inner {
                width: 140%;
                left: -18%;
            }
            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                left: 0;
                -webkit-transform: translate3d(33%, 0, 0);
                transform: translate3d(33%, 0, 0);
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                left: 0;
                -webkit-transform: translate3d(-33%, 0, 0);
                transform: translate3d(-33%, 0, 0);
            }
            .carousel-control.left, .carousel-control.right {
                background: rgba(255, 255, 255, 1);
                width: 25%;
            }

JQuery的

$(document).ready(function () {
                $('#c1').carousel({
                    interval: 10000
                })
                $('.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));
                    }
                });
            });

有没有更简洁的方法来做到这一点，而不是扩展内部元素并克隆孩子？

以下是我移植时的样子......

但是，当我调整大小时，您可以看到克隆元素从后面滑动。