Bootstrap 4多图轮播组件异常：仅显示1张图片而非3张求助

我看了你的代码，问题出在几个细节上，咱们一步步来修复：

1. 调整CSS样式，让图片横向并排显示 #

你的现有CSS已经处理了轮播的平移逻辑，但缺少让图片在轮播项里横向排列的关键设置。更新你的<style>部分为：

.carousel-inner {
  overflow: hidden;
}
.carousel-item {
  display: flex;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}
.carousel-item img {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 5px; /* 可选：给图片添加间距 */
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(33.3333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-33.3333%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

这里的核心改动：

• 给.carousel-item添加display: flex，让克隆进来的图片横向排列，避免垂直堆叠
• 固定每张图片宽度为33.3333%，确保同一时间刚好显示3张
• 保留轮播平移的逻辑，保证切换时的动画正常

2. 修正HTML结构中的图片类 #

你给图片加的col-4是Bootstrap栅格类，需要在.row容器中才会生效。直接去掉这个类，改用上面CSS里的宽度控制，修改后的轮播项结构：

<div class="carousel-item active">
  <img class="img-fluid" src="http://placehold.it/350x180?text=1">
</div>
<div class="carousel-item">
  <img class="img-fluid" src="http://placehold.it/350x180?text=2">
</div>
<!-- 其他轮播项同理 -->

3. 确保JS代码在DOM加载完成后执行 #

你的JS代码直接放在<head>里，此时DOM元素还未加载完成，$('#recipeCarousel')可能找不到目标元素。把JS代码包裹在$(document).ready()中，或者移到<body>末尾：

$(document).ready(function() {
  $('#recipeCarousel').carousel({ interval: 10000 });
  $('.carousel .carousel-item').each(function() {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});

这样能保证克隆图片的逻辑在DOM完全加载后执行，避免失效。

完整修复后的核心代码示例 #

把这些改动整合后，轮播就能正常显示3张图片了，以下是完整的关键部分代码：

<head>
  <title> Welcome - Maqbool Solutions </title>
  <link rel="shortcut icon" href="images/favicon_Y13_5.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  <script src="js/function.js"></script>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="font/css/font-awesome.css">
  <style>
    .carousel-inner {
      overflow: hidden;
    }
    .carousel-item {
      display: flex;
      justify-content: center;
      transition: transform 0.6s ease-in-out;
    }
    .carousel-item img {
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
      padding: 0 5px;
    }
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.3333%);
    }
    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.3333%);
    }
    .carousel-inner .carousel-item-right,
    .carousel-inner .carousel-item-left {
      transform: translateX(0);
    }
  </style>
</head>
<body>
  <div class="container text-center my-3">
    <h2>Bootstrap 4 Multiple 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" role="listbox">
          <div class="carousel-item active">
            <img class="img-fluid" src="http://placehold.it/350x180?text=1">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://placehold.it/350x180?text=2">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://placehold.it/350x180?text=3">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://placehold.it/350x180?text=4">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://placehold.it/350x180?text=5">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://placehold.it/350x180?text=6">
          </div>
        </div>
        <a class="carousel-control-prev" href="#recipeCarousel" 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="#recipeCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <h4>Advances one slide at a time</h4>
  </div>

  <script>
    $(document).ready(function() {
      $('#recipeCarousel').carousel({ interval: 10000 });
      $('.carousel .carousel-item').each(function() {
        var next = $(this).next();
        if (!next.length) {
          next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
          next.next().children(':first-child').clone().appendTo($(this));
        } else {
          $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
      });
    });
  </script>
</body>

内容的提问来源于stack exchange，提问作者Muhammad Ilyas