时间戳

首页 > 解决方案 > Bootstrap 4 Card Carousel 未显示多个项目

javascript - Bootstrap 4 Card Carousel 未显示多个项目

问题描述

关于错误的 GIF 文件https://gifyu.com/image/5JCX

卡片轮播代码取自https://www.codeply.com/go/EIOtI7nkP8/bootstrap-carousel-with-multiple-cards

该网站的 CSS 代码和 JS 代码相同。CSS 文件已链接。js文件最后是这样写的

<script type="text/javascript">
</script>

我在 Card Carousel 的编辑器中使用的代码。

<head>
  <title>Yogi</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.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>

</head>
<body>
v class="container-fluid bg-display">
      <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="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </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>
    </div>

标签： javascripthtmlcsstwitter-bootstrapcarousel

解决方案

缺少一个脚本，您可以在最后运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content="Codeply" />
    <title>Codeply simple HTML/CSS/JS preview</title>
    <base target="_self" />

    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />

    <style>
      @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);
      }
    </style>
  </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/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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <script>
      $("#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));
        }
      });
    </script>
  </body>
</html>

推荐阅读