Bootstrap 3D 水车轮播创建

Question

我正在寻找创建一个水车旋转木马，其中中间的物品比其他两个大一窝（上一个/下一个）。我找到了一种使用卡片创建轮播的方法。使中间项目变大是我的问题所在。

这是我开始使用的代码

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

任何帮助将不胜感激。

Answer 1

添加此类会有所帮助：

.carousel-item.active .col-md-4:nth-child(2) img {
    border: 1px solid red !important;
    transform: scale(1.5);
    position:absolute;
    z-index: 2;
}

完成sn-p：

$('#recipeCarousel').carousel({
  interval: 10000
})

$('.carousel .carousel-item').each(function() {
  var minPerSlide = 3;
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < minPerSlide; i++) {
    next = next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

@media (max-width: 768px) {
  .carousel-inner .carousel-item>div {
    display: none;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}


/* display 3 */

@media (min-width: 768px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33.333%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.333%);
  }
}

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

.carousel-item.active .col-md-4:nth-child(2) img {
  border: 1px solid red !important;
  transform: scale(1.5);
  position: absolute;
  z-index: 2;
  left: 0%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container text-center my-3">
  <h2 class="font-weight-light">Bootstrap 4 - Multi Item Carousel</h2>
  <div class="row mx-auto my-auto">
    <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item active">
          <div class="col-md-4">
            <div class="card card-body">
              <img class="img-fluid" src="http://placehold.it/380?text=1">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-4">
            <div class="card card-body">
              <img class="img-fluid" src="http://placehold.it/380?text=2">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-4">
            <div class="card card-body">
              <img class="img-fluid" src="http://placehold.it/380?text=3">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-4">
            <div class="card card-body">
              <img class="img-fluid" src="http://placehold.it/380?text=4">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-4">
            <div class="card card-body">
              <img class="img-fluid" src="http://placehold.it/380?text=5">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-4">
            <div class="card card-body">
              <img class="img-fluid" src="http://placehold.it/380?text=6">
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <h5 class="mt-2">Advances one slide at a time</h5>
</div>