javascript - 轮播 - 无法定位中心图像

Question

我的 carouse/slider 有问题，我已经做到了，上一张和下一张图片每边各占 25%，中央图片占 50% 宽度。问题是我能够更改左右图像的背景，但我似乎无法将相同的颜色应用于中间图像。我已经尝试定位旋转木马使用的几乎所有类和 ID，但我已经想不出如何定位中心图像的想法:

感谢任何建议，这是 HTML:

 <div class="row">
        <div class="col-md-12 border center-block">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-4">
                            <img src="http://localhost/BlueQuote/wp-content/themes/blaskan/assets/images/lejla1.jpg" class="img-responsive">
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <img src="http://localhost/BlueQuote/wp-content/themes/blaskan/assets/images/lejla2.jpg" class="img-responsive">
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <img src="http://localhost/BlueQuote/wp-content/themes/blaskan/assets/images/lejla3.jpg" class="img-responsive">
                        </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-inner {
    width: 150%;
    left: -25%;
    background: rgba(248, 247, 216, 0.7);
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    background: #002266;
    width: 25%;
}
.slider {
    margin-top: -100px;
    margin-left: -15px;
    margin-bottom: 2%;
    top: 0;
    left: 0;
    z-index: 11;
    width: 105vw;
    border-top: 10px solid #fff7ea;
    border-bottom: 10px solid #fff7ea;
}
.col-xs-4 {
    padding: 0 0 0 0;
}
.carousel .item {
    background: #002266;
}

还有 jQuery:

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

这里还有 codepen demo .

Answer 1

从您的边元素中取出颜色声明，并将其应用于整个容器，如下所示:

.carousel-inner{position:relative;}

.carousel-inner:after {
    content:"";
    width: 100%; height:100%;
    background: rgba(0, 34, 102, 0.3);
    position:absolute; top:0; left:0;
}

这应该在所有内容之上创建一个半透明的蓝色层