Search code examples
jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

Bootstrap Carousel showing next and previous image


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?


Solution

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