具有持续内容的Bootstrap Carousel

Question

Bootstrap 4中是否可以设置一个旋转木马，旋转木马没有分开，但可见？例如，您可以看到轮播项目2和3继续，而第一个仍然可见。我的解释太可怕了，所以这里有一张图片可供帮助：

我如何实现这一目标？

这里是代码的基本大纲，真的很感激建议。谢谢。

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Title</h5>
          <p class="card-text">Text goes here</p>
          <a href="#" class="card-link">First Link</a>
          <a href="#" class="card-link">Second Link</a>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以创建一个多项旋转木马并使用伪元素（:: before，:: after）将叠加层放在prev和下一张幻灯片上...

https://www.codeply.com/go/X53cTGGSMj

.carousel,
.carousel-inner,
.carousel-inner > .carousel-item {
    overflow: hidden;
}
.carousel-inner > .carousel-item.active,
.carousel-inner > .carousel-item-next {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
}
.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;
}