How to display previous and next images with a Bootstrap carousel

Question

The effect I\'m looking for can be seen in the following image, it is a carousel with 3 images.

How can I make the bootstrap carousel show the left and right images

Answer 1

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