Question

我研究了Bootstrap Multi Item轮播滑块，并使用了Internet上的一些代码。但是代码无法正常工作。问题在于这些卡彼此之间不会显示水平。而且我不知道如何解决这个问题

https://mdbootstrap.com/snippets/jquery/temp/819683?action=prism_export我为此使用了此链接，但按应有的方式行不通。

现在看起来像这样

Answer 1

检查下面的代码片段以获取带有卡的引导轮播

$('#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);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


</head>

<body>
  <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/280x350?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/280x350?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/280x350?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/280x350?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/280x350?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/280x350?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>

  </div>


</body>

</html>

多项目轮播滑块：水平

1 个答案: