Question

我按照我想要的方式设置了引导程序轮播，但动画重叠，我似乎无法弄清楚原因。当幻灯片发生时，当前幻灯片与其自身重叠，从而产生模糊效果。

请在我出错的地方帮忙。

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。

Answer 2

我在动画片上挣扎了一段时间 - 然后想到滑动容器而不是幻灯片应该更有效率。

以下是代码：

.carousel-inner {
  width: 200%;
}
.carousel-inner > .item {
  width: 50%; float: left;
}
.carousel-inner.prev {
  left: -100%;
}
.carousel-inner.move {
  -webkit-transition: .6s ease-in-out margin-left;
  -o-transition: .6s ease-in-out margin-left;
  transition: .6s ease-in-out margin-left;
}
.carousel-inner > .item.active,
.carousel-inner > .item.out {
  display: block;
}
.carousel-inner.move.right {
  margin-left: 100%;
}
.carousel-inner.move.left {
  margin-left: -100%;
}
.carousel-inner.move.cycle > .item {
  float: right;
}

与之相关的JS：

return this.fx(function(state) {
    return show.items.map(function(items) {
        if (state.next < 0) {
            items.classList.add('cycle');
            state.next = items.childElementCount - 1;
        }else if (state.next == items.childElementCount) {
            items.classList.add('cycle');
            state.next = 0;
        }
        var anim = [].slice.call(items.children).reduce(function(res, el, idx) {
            if (idx == state.next) {
                state.curr = state.next;
                state.next = 0; res.next = el;
            }else if (idx == state.prev) {
                res.curr = el;
            }
            return res;
        }, {});
        anim.curr.classList.add('out');
        anim.curr.classList.remove('active');
        items.classList.add(state.ctrl);
        anim.next.classList.add('active');
        items.classList.add('move');
        show.end.run(items, function() {
            items.className = 'carousel-inner';
            anim.curr.classList.remove('out');
        }).classList.add(state.move);
        return state;
    }).run();
});

Bootstrap Carousel动画重叠

2 个答案: