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

推荐答案

可以使用Bootstrap，但需要一些自定义...

It is possible with Bootstrap, but requires some customizations...

查看Bootply上的此示例：

See this example on Bootply: http://bootply.com/94444

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

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

另一个变化只显示下一张和上一张幻灯片的一部分。这可以通过在 carousel-inner 的左侧和右侧放置绝对位置覆盖图来完成。

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

演示部分next /上一页：

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

这篇关于Bootstrap Carousel显示下一个和前一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！