Bootstrap Carousel showing next and previous image

Question

Is the bootstrap carousel extendible to show the next and previous images in the slider? ```

...

…

Accepted Answer

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

Bootstrap Carousel showing next and previous image

Solution

Problem