轮播组件(Carousel)异常：切换按钮失效，图片无法横向排列求助

你的轮播组件目前遇到了两个核心问题：切换按钮失效、内容纵向排列，咱们一步步拆解问题并修复：

问题根源分析 #

• DOM结构不符合Bootstrap规范：Bootstrap Carousel要求.carousel-item必须直接作为.carousel-inner的子元素，你把所有轮播项都塞进了额外的#Places row里，完全打乱了轮播的布局逻辑。
• 重复添加active类：轮播组件仅需要第一个轮播项带有active类，你在循环中给每一项都加了这个类，导致组件无法识别正确的初始状态和切换目标。
• 缺少组件初始化步骤：如果使用Bootstrap 3/4，需要手动初始化Carousel，否则切换按钮的点击事件不会被绑定。

修正后的完整代码 #

1. 调整HTML结构 #

移除多余的嵌套row，让.carousel-inner直接承载轮播项：

<h3 style="text-align:center;">Top Visiting Sites</h3>
<div class="row">
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
  <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
    <div class="carousel slide media-carousel" id="media">
      <div class="carousel-inner" id="Places">
        <!-- 轮播项将通过JS动态插入此处 -->
      </div>
      <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
      <a data-slide="next" href="#media" class="right carousel-control">›</a>
    </div>
  </div>
</div>

2. 修改JS逻辑 #

调整循环代码，仅给第一个轮播项添加active类，同时修正轮播项的嵌套结构：

for (var i = 0; i < total.length; i++) {
  var obj = sort[i];
  // 仅第一个轮播项添加active类
  var activeClass = i === 0 ? 'active' : '';
  
  $('#Places').append(`
    <div class="carousel-item ${activeClass}">
      <div class="row">
        <div class="col-md-3" style="border-right:2px solid gray;">
          <div class="panel panel-info">
            <div class="panel-body">
              <div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
              <h4><span> ${ obj.Name}</span></h4>
              <i class="glyphicon glyphicon-star"></i>
              <i class="glyphicon glyphicon-star"></i>
              <i class="glyphicon glyphicon-star"></i>
              <i class="glyphicon glyphicon-star"></i>
              <i class="glyphicon glyphicon-star"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  `);
}

// 初始化Carousel组件（Bootstrap 3/4必须步骤）
$('#media').carousel({
  interval: 5000, // 可选：自动轮播间隔时间（毫秒）
  wrap: true      // 可选：是否循环轮播
});

// 如果使用Bootstrap 5，替换上面的初始化代码为：
// new bootstrap.Carousel(document.getElementById('media'), {
//   interval: 5000,
//   wrap: true
// });

3. 补充样式建议 #

给.TourismImage添加固定宽高，确保背景图片正常显示：

.TourismImage {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}

内容的提问来源于stack exchange，提问作者sreeja sridharan