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.3 (update 2023)
With JS and CSS the "reveal" carousel can be acheived the same way in Bootstrap 5.3:
https://codeply.com/p/f6zckgIuE6
Bootstrap 5.0 (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%; }