使用jQuery向Bootstrap 4 Carousel动态添加图片时显示为列表的问题

看起来你遇到的核心问题是Bootstrap版本类名不匹配，还有几个小属性错误，导致轮播组件没正确加载样式，图片才会以列表形式显示。我来帮你一步步修正：

问题分析 #

• 类名过时：Bootstrap 4及以上版本里，轮播项的类名已经从.item改成了.carousel-item，你还在用旧类名，Bootstrap的轮播样式自然没法生效。
• 控制按钮目标错误：你的轮播容器ID是#carousel，但前后切换按钮的href指向的是#demo，这会导致按钮点击后没有反应。
• 图片响应性不足：直接给图片加width="50%"不够灵活，建议用Bootstrap自带的img-fluid类实现自适应图片。

修正后的代码 #

HTML部分（仅调整控制按钮目标） #

<div id="carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators"></ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner"></div>
  <!-- Controls -->
  <a class="carousel-control-prev" href="#carousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

JavaScript部分（更新类名+优化图片） #

$(document).ready(function(){
  for(let j = 0; j < parkInfo.data[i].images.length; j++) {
    // 替换.item为.carousel-item，添加img-fluid类实现响应式
    $('<div class="carousel-item"><img src="'+parkInfo.data[i].images[j].url+'" class="img-fluid"></div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel" data-slide-to="'+j+'"></li>').appendTo('.carousel-indicators')
  }
  // 给第一个轮播项和指示器标记为激活状态
  $('.carousel-item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  // 初始化轮播组件
  $('#carousel').carousel();
});

额外提示 #

• 如果你用的是Bootstrap 5，需要把属性名做对应调整：data-ride改成data-bs-ride，data-slide改成data-bs-slide，确保和版本匹配。
• 要是图片加载后轮播高度不一致，可以给图片加统一的显示样式：

.carousel-item img {
  object-fit: cover;
  height: 400px; /* 按需设置高度 */
}

这样修改后，轮播组件就能正常工作，图片不会再以列表形式展示了。

内容的提问来源于stack exchange，提问作者Lam Pham