Bootstrap Carousel 显示下一张和上一张图片

Question

bootstrap carousel 是否可以扩展以显示滑块中的下一个和上一个图像？

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

我的旋转木马目前看起来像这样，如何将上一张和下一张图片添加到当前活动的幻灯片中？

Answer 1

Bootstrap 4 的解决方案

字幕在 768 像素或更大宽度的屏幕上可见。

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://via.placeholder.com/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://via.placeholder.com/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://via.placeholder.com/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

Bootstrap 5（2021 年更新）

Bootstrap 5 不再需要 jQuery，因此可以使用 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 部分展示轮播演示

---

Bootstrap 4（2019 年更新）

另一个变化是只显示下一张和上一张幻灯片的一部分。 这可以通过在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 部分轮播
Bootstrap 4 部分轮播（替代）

---

Bootstrap 3（原始答案）

Bootstrap 是可能的，但需要一些自定义...

在 Bootply 上查看此示例： http ://bootply.com/94444

您必须使用 CSS 和 jQuery 自定义幻灯片的位置。

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

Answer 3

不幸的是，我体验到 Bootstrap 3.3.5 不支持给定的解决方案，因此我制作了一个全新的 Bootstrap 3 carousel 扩展来达到目标​​。 它可以在https://github.com/assarte/visor-carousel找到

希望这会有所帮助。