如何使用Bootstrap轮播显示上一张和下一张图片 [英] How to display previous and next images with a Bootstrap carousel

问题描述

我在寻找的效果可以在下面的图片中看到，它是一个带有3张图片的轮播。

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

如何让引导轮播展示不透明度为0.7的左右图像？

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

img src =https://i.imgur.com/6flADwl.jpgalt =http://i.imgur.com/6flADwl.jpg>

以下是我的轮播模板。

<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;
}

推荐答案

http://stackoverflow.com/a/20349746/4639281\">对另一个问题的回答，如果您添加以下css到您的代码，它将提供您正在寻找的效果。

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.

我们基本上必须将 .carousel-inner 扩展到大于 .carousel ，然后将它居中并隐藏 .carousel 的溢出。

We basically have to expand .carousel-inner to be larger than .carousel, then center it and hide the overflow of .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

在Bootstrap版本3.3.0中在CSS中有一个更改，使以前的方法无效。所以这是目前的方法。

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

（演示）

.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

（演示）

.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%;
}

这篇关于如何使用Bootstrap轮播显示上一张和下一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！