Bootstrap Carousel showing next and previous image
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%; }
The solution for Bootstrap 4
Captions are visible on screens 768px wide or more.
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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/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>