Bootstrap Carousel showing next and previous image

Asked 3/12, 2013 at 9:5 Answered 27/2 at 14:36

Solved jquery css twitter-bootstrap twitter-bootstrap-3 carousel

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?

Paramount answered 3/12, 2013 at 9:5 Comment(1)

Unless you're absolutely locked into using only Bootstrap, Mike Alsup's Cycle plugin might be easier for this: jquery.malsup.com/cycle2/demo/carousel.php – Ammo 3/12, 2013 at 9:11

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

Senghor answered 3/12, 2013 at 11:21 Comment(0)

screenshot

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://place-hold.it/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://place-hold.it/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://place-hold.it/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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>

Budweis answered 1/3, 2019 at 20:10 Comment(1)

@Paramount this answer should be now the accepted answer. Thank you Gleb user6263942 Its code base, approach and example are the most up-to-date to modern standards and totally supported in BootStrap 4.x – Thitherto 5/3, 2020 at 0:11

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

Senghor answered 3/12, 2013 at 11:21 Comment(0)

I experienced that Bootstrap 3.3.5 is not supports the given solution unfortunately, there I made a completely new Bootstrap 3 carousel extension to reach the goal. It can be found at https://github.com/assarte/visor-carousel

Hope this could be helpful.

Bitt answered 29/10, 2015 at 19:4 Comment(0)

You could go to bootstrap docs and copy the base code available and then tweak it according to your personal preferences.

Coburg answered 7/6, 2023 at 13:26 Comment(2)

Instead of responding with "read the documentation" type of answers, try to answer the question with examples and your own explanation. By clicking the edit button, you can modify your comment and include the necessary samples and instructions. Instead of relying on external references, try to formulate the complete answer within your comment. – Diseur 7/6, 2023 at 15:40

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Musculature 11/6, 2023 at 11:45

screenshot

The solution for Bootstrap 5

Parts of adjacent slides are visible on screens 500px wide or more.
Captions are visible on screens 768px wide or more.

https://codepen.io/glebkema/pen/BaEBogL

$('.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;
}

/* hide clones of neighboring slides on mobile */
.multi-item-carousel .item__third:first-child,
.multi-item-carousel .item__third:last-child {
  display: none;
}

@media (min-width: 500px) {
  .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%;
  }
  
  /* slides receive these classes only while moving */
  .multi-item-carousel .carousel-item-next:not(.carousel-item-start),
  .multi-item-carousel .carousel-item-end.active {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
  }
  .multi-item-carousel .carousel-item-prev:not(.carousel-item-end),
  .multi-item-carousel .carousel-item-start.active {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
  }
  
  /* now the content of the current slide occupies only a third of it between the clones of two adjacent slides */
  .multi-item-carousel .item__third {
    display: block !important;
    float: left;
    position: relative;
    /* captions can now be added */
    width: 33.33333333%;
  }
}

<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide multi-item-carousel" data-bs-ride="carousel">

    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="item__third">
          <img src="https://place-hold.it/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://place-hold.it/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://place-hold.it/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>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Budweis answered 27/2 at 14:36 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

The solution for Bootstrap 4

The solution for Bootstrap 5

Recommended topics

Hot tags