Question

我的carouse /滑块有问题，我之前做过这样的事情，下一张图像每边占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;
}

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

轮播 - 无法定位中心图像

1 个答案: