javascript - Bootstrap Carousel 动画重叠

Question

我已经按照我想要的方式设置了 bootstrap carousel，但是动画是重叠的，我似乎无法弄清楚为什么。当幻灯片发生时，当前幻灯片会重叠到自身上，从而产生模糊效果。

请在我出错的地方提供帮助。

DEMO JSFIDDLE

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 PridelCr">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-4">

<a href="#"><img src="https://s32.postimg.org/u7dfocir9/pridel_header_1.jpg" class="img-responsive"></a>
<h3>Slide 1</h3>
<p>This is the first slide which is going to be awesome.</p>

                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">

<a href="#"><img src="https://s32.postimg.org/nuyaeifp1/pridel_header_2.jpg" class="img-responsive"></a>
<h3>Slide 2</h3>
<p>This is the second slide which is not as awesome.</p>

                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">

<a href="#"><img src="https://s32.postimg.org/r32rrk1yt/pridel_header_3.jpg" class="img-responsive"></a>
<h3>Slide 3</h3>
<p>This is the most awesome slide of them all</p>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>

CSS:

    .carousel {
        overflow: hidden;
    }
    .career-carousel {
        padding: 0px;
    }
    /* .carousel-inner {
        width: 240%;
        left: -70%;
    }*/
    .carousel-inner {
        width: 240%;
        left: -69%;
    }
    .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, 0.3);
        width: 5%;
    }

Javascript:

    $(document).ready(function () {
        $('#myCarousel').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));
            }
        });
    });

Answer 1

您将每张幻灯片克隆 3 次。

    $('.carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        // Clone() creates one additional copy here
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {

            // And also here 
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });

去掉克隆语句，您将不会看到重叠的幻灯片。事实上，我看不到 $.each() 函数中整个代码背后的目的。

查看工作示例 here .

编辑

由于您要在每张幻灯片中创建上一张和下一张幻灯片的克隆，因此当它们转换时，它们会相互重叠。它在图像中不可见，但在文本中非常明显。

为了克服这个问题，您需要在幻灯片过渡时隐藏重叠的幻灯片。

下面的 CSS 应该可以做到:

.carousel-inner > .item.prev.right > div:nth-child(2),
.carousel-inner > .item.prev.right > div:nth-child(3){
  display: none;
}

.carousel-inner > .item.active.left > div:nth-child(2),
.carousel-inner > .item.active.left > div:nth-child(3){
  display: none;
}

查看工作示例 here .