时间戳

首页 > 解决方案 > 简单的 Bootstrap 4 轮播，下一张幻灯片的一部分靠近主轮播项目

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

问题描述

我想要一个简单的Bootstrap 4 轮播，它显示右侧下一张幻灯片的一部分。请参考这张图片以了解我真正想要的我发现了两个与我类似的问题，但没有解决。这些链接是

1）引导轮播显示下一张幻灯片的一部分

2）引导轮播仅显示幻灯片的一部分

我尝试使用下一个图像 src 在附近创建一个 div。这完全是一团糟。我不使用任何其他库，例如 OWL 轮播。我在下面附上了一个带有三个图像滑块的简单引导 4 轮播代码。

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

我需要下一个轮播项目（它的四分之一）与主轮播项目一起显示

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

嗨，看看这个例子与你的问题有关，你可以自定义它

$('.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%;
}
.carousel-inner > .carousel-item.next, 
.carousel-inner > .carousel-item.active.right {
  -webkit-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}
.carousel-inner > .carousel-item.prev, 
.carousel-inner > .carousel-item.active.left {
  -webkit-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}
.item__third {
  float: left;
  position: relative;  /* captions can now be added */
  width: 33.33333333%;
}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Carousel 4 - Show parts of prev and next slides with captions</title>
  
  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

推荐阅读