Bootstrap Carousel showing next and previous image

Question

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

    


        
                      

              相关标签:
       
      

Answer 1

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="//placehold.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="//placehold.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="//placehold.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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Answer 2

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.

Answer 3

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

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

Demo of partial next/prev: http://www.codeply.com/go/QGkUVSqil8