引导程序轮播是否可以扩展以显示滑块中的下一个和上一个图像?
<div class="item"><img src="img/bike2.png" alt="..."><div class="carousel-caption">...
<!-- 控件--><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>
我的旋转木马目前看起来像这样，我如何将上一张和下一张图片添加到当前活动的幻灯片中?
Bootstrap 5(2021 年更新)
Bootstrap 5 不再需要 jQuery，因此可以使用 vanilla JS 克隆幻灯片(需要部分显示上一张和下一张幻灯片).
slides.forEach((el) => {//每个轮播项目的幻灯片数量const minPerSlide = slides.length让下一个 = el.nextElementSiblingfor (var i=1; i引导程序 4(2019 年更新)
另一个变化是只显示下一张和上一张幻灯片的一部分.这可以通过在 carousel-inner..
.carousel-inner:before {位置:绝对；顶部:0；底部:0；正确:82%；左:0；内容:《》；显示:块；背景色:#fff;z-索引:2；}.carousel-inner:后{位置:绝对；顶部:0；底部:0;右:0；左:82%；内容:《》；显示:块；背景色:#fff;z-索引:2；}Bootstrap 4 部分轮播
Bootstrap 4 部分轮播(替代)
引导程序 3(原始答案)
Bootstrap 是可能的，但需要一些自定义...
在 Bootply 上查看此示例:http://bootply.com/94444
您必须使用 CSS 和 jQuery 自定义幻灯片的位置..
.carousel-inner .active.left { left: -33%;}.carousel-inner .next { left: 33%;}.carousel-inner .prev { 左:-33%;}Is the bootstrap carousel extendible to show the next and previous images in the slider?
<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?
Bootstrap 5 (update 2021)
jQuery is no longer required for Bootstrap 5 so the cloning of the slides (needed for partial reveal of prev and next slide) can be done using vanilla JS.
slides.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = slides.length
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = slides[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
Bootstrap 5 partial reveal carousel demo
Bootstrap 4 (update 2019)
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: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;
}
Bootstrap 4 partial carousel
Bootstrap 4 partial carousel (alternate)
Bootstrap 3 (original answer)
It is possible with Bootstrap, but requires some customizations...
See this example on Bootply: http://bootply.com/94444
You have to customize the position of the slides using CSS and jQuery..
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
这篇关于Bootstrap Carousel 显示下一张和上一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
