Bootstrap 4 Card Carousel 未显示多个项目

【问题标题】：Bootstrap 4 Card Carousel not showing multiple itemsBootstrap 4 Card Carousel 未显示多个项目
【发布时间】：2021-05-16 21:05:21
【问题描述】：

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

卡片轮播代码取自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>

【问题讨论】：

    标签： javascript html css twitter-bootstrap carousel


    【解决方案1】：

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

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

    【讨论】：

    • 我保留了那个脚本。还是不行。
    • 如果我运行提供的代码，它会在我的最后运行。您可以根据您的需要从提供的代码中进行更改。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-06-15
    • 1970-01-01
    • 1970-01-01
    • 2018-07-15
    • 1970-01-01
    • 2013-03-03
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode