How to Display Previous and Next Images with a Bootstrap Carousel

How to display previous and next images with a Bootstrap carousel

Expanding on this answer to another question, if you add the following css to your code it will provide the effect you're looking for.

We basically have to expand .carousel-inner to be larger than .carousel, then center it and hide the overflow of .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

In Bootstrap version 3.3.0 there was a change in the CSS which invalidated the previous method. So this is the current method.

(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

(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%;
}

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%; }

Bootstrap Carousel doesn't change next/previous picture

Try to remove "active" from second and third img tags in your carousel code

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
      </div>
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
      </div>
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

To

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

---

Related Topics