javascript - 简单的 Bootstrap 4 轮播，下一张幻灯片的一部分靠近主轮播元素

Question

我想要一个简单的 Bootstrap 4 旋转木马，它在右侧显示下一张幻灯片的一部分。 我发现了两个与我的问题相似但没有解决的问题。这些链接是

1) Bootstrap carousel reveal part of next slide

2) Bootstrap carousel show only part of the slide

我已经尝试在附近使用下一个图像 src 创建一个 div。这完全是一团糟。我不使用任何其他库，例如 OWL carousel。我在下面附上了一个简单的 bootstrap 4 轮播代码，其中包含三个图像 slider 。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
  <img class="d-block w-100" src="..." alt="First slide">
</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>
</div>

我需要下一个轮播元素(四分之一)与主轮播元素一起显示

Answer 1

它对我有用。请参阅下面的实例。

$('.multi-item-carousel .carousel-item').each(function() {
  var next = $(this).next();
  if (!next.length) next = $(this).siblings(':first');
  next.children(':first-child').clone().appendTo($(this));
});
$('.multi-item-carousel .carousel-item').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-control-prev,
.multi-item-carousel .carousel-control-next {
  background: rgba(255, 255, 255, 0.5);
  width: 5%;
}

.multi-item-carousel .carousel-inner {
  width: 310%;
  left: -80%;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(75%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-75%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.item__third {
  float: left;
  width: 25%;
  background-size: cover;
  height: 400px;
}

#bg-1 {
  background: url(https://source.unsplash.com/juHayWuaaoQ/1200x400);
}

#bg-2 {
  background: url(https://source.unsplash.com/eWFdaPRFjwE/1200x400);
}

#bg-3 {
  background: url(https://source.unsplash.com/eXHeq48Z-Q4/1200x400);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide multi-item-carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="item__third" id="bg-1"></div>
    </div>
    <div class="carousel-item">
      <div class="item__third" id="bg-2"></div>
    </div>
    <div class="carousel-item">
      <div class="item__third" id="bg-3"></div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>