jQuery Bootstrap Carousel 显示下一张和上一张图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20346847/
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
Bootstrap Carousel showing next and previous image
提问by user667430
Is the bootstrap carousel extendible to show the next and previous images in the slider?
bootstrap carousel 是否可以扩展以显示滑块中的下一个和上一个图像？
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/bike.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/bike2.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
My carousel looks like this at the moment, how can i add in the previous and next images to the currently active slide?
我的旋转木马目前看起来像这样，如何将上一张和下一张图片添加到当前活动的幻灯片中？
采纳答案by Zim
It is possible with Bootstrap, but requires some customizations...
Bootstrap 是可能的，但需要一些自定义...
See this example on Bootply: http://bootply.com/94444
在 Bootply 上查看此示例：http://bootply.com/94444
You have to customize the position of the slides using CSS and jQuery..
您必须使用 CSS 和 jQuery 自定义幻灯片的位置。
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
Another variation is only reveal a portion of the next and previous slides. This can be done by placing an absolute position overlay over the left and right side of the carousel-inner..
另一个变化是只显示下一张和上一张幻灯片的一部分。这可以通过在carousel-inner..的左侧和右侧放置绝对位置叠加来完成。
.carousel-inner:before {
position:absolute;
top:0;
bottom: 0;
right: 82%;
left: 0;
content:"";
display:block;
background-color: #fff;
z-index: 2;
}
.carousel-inner:after {
position:absolute;
top:0;
bottom:0;
right: 0;
left: 82%;
content:"";
display:block;
background-color:#fff;
z-index: 2;
}
Demo of partial next/prev: http://www.codeply.com/go/QGkUVSqil8
部分next/prev演示：http: //www.codeply.com/go/QGkUVSqil8
回答by Gleb Kemarsky
The solution for Bootstrap 4
Bootstrap 4 的解决方案
Captions are visible on screens 768px wide or more.
字幕在 768 像素或更大宽度的屏幕上可见。
https://codepen.io/glebkema/pen/daLzpL
https://codepen.io/glebkema/pen/daLzpL
$('.carousel-item', '.multi-item-carousel').each(function(){
var next = $(this).next();
if (! next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function(){
var prev = $(this).prev();
if (! prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});.multi-item-carousel {
overflow: hidden;
}
.multi-item-carousel .carousel-indicators {
margin-right: 25%;
margin-left: 25%;
}
.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next {
background: rgba(255, 255, 255, 0.3);
width: 25%;
z-index: 11; /* .carousel-caption has z-index 10 */
}
.multi-item-carousel .carousel-inner {
width: 150%;
left: -25%;
}
.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.multi-item-carousel .item__third {
float: left;
position: relative;
width: 33.33333333%;
}<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide multi-item-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="//placehold.it/900x300/c69/f9c/?text=1" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/9c6/cf9/?text=2" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/69c/9cf/?text=3" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>回答by Assarte
I experienced that Bootstrap 3.3.5 is not supports the given solution unfortunately, there I made a completely new Bootstrap 3 carousel extension to reach the goal. It can be found at https://github.com/assarte/visor-carousel
不幸的是，我体验到 Bootstrap 3.3.5 不支持给定的解决方案，因此我制作了一个全新的 Bootstrap 3 carousel 扩展来达到目标。可以在https://github.com/assarte/visor-carousel找到
Hope this could be helpful.
希望这会有所帮助。
