twitter-bootstrap 如何使用 Bootstrap 轮播显示上一个和下一个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31569225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display previous and next images with a Bootstrap carousel
提问by xRobot
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;
}
回答by
Expanding on this answerto 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-innerto 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%;
}
