如何使用引导旋转木马显示之前和之后的图像

The effect I'm looking for can be seen in the following image, it is a carousel with 3 images.

我正在寻找的效果可以在下面的图片中看到，它是一个有3张图片的旋转木马。

How can I make the bootstrap carousel show the left and right images with an opacity of 0.7?

如何使引导旋转木马显示不透明度为0.7的左右图像?

The following is my carousel template.

下面是我的旋转木马模板。

<div class="col-md-10 center-block">
    <img id="logo" src="./img/yoox_group.png" alt="yoog group" />

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./img/carousel/carousel-001.jpg" alt="..." />
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="./img/carousel/carousel-002.jpg" alt="..." />
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="./img/carousel/carousel-003.jpg" alt="..." />
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <img id="arrowleft" src="./img/arrow_left.png" />
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <img id="arrowright" src="./img/arrow_right.png" />
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

#arrowleft {
    background-color: #FFF;
    padding: 10px 8px;
    position: absolute;
    margin-left: -95px;
    top: 45%;
    z-index: 5;
    display: inline-block;
}
#arrowright {
    background-color: #FFF;
    padding: 10px 8px;
    position: absolute;
    margin-left: 67px;
    top: 45%;
    z-index: 5;
    display: inline-block;
}

1 个解决方案

#1

Expanding on this answer to another question, if you add the following css to your code it will provide the effect you're looking for.

将这个答案扩展到另一个问题，如果您将以下css添加到代码中，它将提供您正在寻找的效果。

We basically have to expand .carousel-inner to be larger than .carousel, then center it and hide the overflow of .carousel.

我们基本上要把。carousel-inner展开成大于。carousel，然后将它居中，隐藏.carousel的溢出。

To obtain the opacity effect, we expand the size of the previous and next arrow containers, then set a translucent white background.

为了获得不透明效果，我们将之前和下一个箭头容器的大小展开，然后设置一个半透明的白色背景。

---

Bootstrap >= 3.3.0

引导> = 3.3.0

In Bootstrap version 3.3.0 there was a change in the CSS which invalidated the previous method. So this is the current method.

在Bootstrap 3.3.0版本中，CSS发生了变化，使以前的方法无效。这就是当前的方法。

(Demo)

(演示)

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.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: rgba(255, 255, 255, 0.3);
    width: 25%;
}

---

Bootstrap < 3.3.0

引导< 3.3.0

(Demo)

(演示)

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner .active.left {
    left: -33%;
}
.carousel-inner .next {
    left: 33%;
}
.carousel-inner .prev {
    left: -33%;
}
.carousel-control.left, .carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}