Bootstrap 3轮播仅显示1个div问题及多元素轮播改造咨询

你的三联轮播只显示单个元素，主要是这几个核心问题导致的：

• 自定义多元素样式未生效：你写了.multi-item-carousel的样式，但没把这个类加到轮播容器上，Bootstrap原生轮播默认每个.item是100%宽度，自然只能显示一个。
• 元素定位导致重叠：.carosuelProperties用了position:absolute，会让所有轮播元素叠在一起，只能看到最上层的那个。
• Active类应用错误：你给前三个item都加了active，但Bootstrap原生轮播只认一个.active项，这会打乱轮播的切换逻辑。

1. 修正HTML结构 #

给轮播容器加上multi-item-carousel类，让自定义样式生效；同时注意闭合未结束的<a>标签：

<div class="carousel slide multi-item-carousel" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
  <div class="carousel-inner">
    @if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
      @foreach ($participatingProperties as $property)
        <a href="/view/property/{{ $property->property_slug or $property->id }}">
          <div class="carousel__box itemProperties col-md-4 col-sm-12 item">
            <h2 class="propertyTitleCaro centered white sub-header">
              <?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>
            </h2>
            <p class="centered white smallerText propertyDesCaro">
              <?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?>
            </p>
            <div class="carosuelProperties" id="{{ $property->id }}">
              <img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
            </div>
          </div>
        </a>
      @endforeach
    @endif
  </div>
  <a class="left carousel-control arrowOf" href="#myCarousel" data-slide="prev">
    <i class="fa fa-chevron-left fa-3x"></i>
  </a>
  <a class="right carousel-control arrowOf" href="#myCarousel" data-slide="next">
    <i class="fa fa-chevron-right fa-3x"></i>
  </a>
</div>

2. 调整核心CSS样式 #

重点修改多元素轮播的布局逻辑，解决宽度和重叠问题：

/* 多元素轮播核心样式 */
.multi-item-carousel {
  .carousel-inner {
    > .item {
      transition: 500ms ease-in-out left;
      width: 33.333%; /* 每个item占1/3宽度，刚好显示3个 */
      float: left; /* 让item并排排列 */
    }

    /* 轮播切换的定位逻辑 */
    .active, .next, .prev {
      display: block;
    }

    .active { left: 0; }
    .next { left: 33.333%; }
    .prev { left: -33.333%; }

    .active.left { left: -33.333%; }
    .active.right { left: 33.333%; }
    .next.left, .prev.right { left: 0; }
  }

  /* 调整控制按钮位置，避免遮挡内容 */
  .carousel-control {
    background: none!important;
    width: 5%;
  }
}

/* 移除绝对定位，解决元素重叠 */
.carosuelProperties {
  min-height: 300px;
  min-width: 300px;
  max-height: 300px;
  max-width: 300px;
  width: 20vw;
  border-radius: 20vw;
  top: 0;
  left: 0;
  position: relative; /* 替换absolute */
  transition: .5s ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto; /* 让背景容器居中 */
}

/* 调整item容器布局，确保内容正常显示 */
.itemProperties {
  min-height: 300px;
  min-width: 300px;
  max-height: 300px;
  max-width: 300px;
  width: 20vw;
  border-radius: 20vw;
  background-color: #008692;
  float: none;
  margin: 0 auto;
}

/* 保留你原有的其他样式 */
.caroImgClass { display: none; }
.arrowOf { 
  color: #008692!important; 
  transition: all 0.5s; 
  margin-top: -25px; 
}
.arrowOf:hover { 
  color: #000000!important; 
  cursor: pointer; 
  transition: all 0.5s; 
}
@media only screen and (min-width: 1900px) { 
  .propertyTitleCaro { 
    padding: 1vw; 
    padding-bottom: 0; 
    font-size: 1.5rem; 
    font-weight: 1000; 
    margin-top: 1.5vw; 
  }
}
@media only screen and (max-width: 1900px) { 
  .propertyTitleCaro { 
    font-size: 1.5rem; 
    font-weight: 1000; 
    margin-top: 3vw; 
    padding: 10%; 
    padding-bottom: 0%; 
  }
}
.propertyDesCaro { padding: 1.5vw; padding-top: 0px; }

3. 修正JavaScript逻辑 #

调整轮播初始化和元素克隆逻辑，适配多元素循环：

$(document).ready(function() {
  // 处理背景图片的逻辑保留
  $('.carosuelProperties').each(function() {
    var current = $(this);
    var image = current.find('img');
    current.css('background-image', 'url(' + image.attr('src') + ')');
  });

  // 只给第一个item加active，多元素轮播不需要多个active
  $('.item').first().addClass('active');

  // 克隆元素补充首尾，实现无缝循环
  $('.carousel .item').each(function(){
    // 克隆下一个元素
    var next = $(this).next();
    if (!next.length) next = $(this).siblings(':first');
    next.children(':first-child').clone().appendTo($(this));
    
    // 克隆下下个元素，确保每个item里有3个内容块
    var next2 = next.next();
    if (!next2.length) next2 = $(this).siblings(':first');
    next2.children(':first-child').clone().appendTo($(this));
  });

  // 初始化轮播
  $('#myCarousel').carousel({ 
    interval: 4000,
    pause: "hover"
  });
});

Bootstrap3原生不支持多元素轮播，我们是通过修改.item宽度、调整定位偏移，加上克隆元素的方式来模拟这种效果。核心是让每个轮播项只占1/3宽度，切换时整体偏移一个item的宽度，同时通过克隆首尾元素实现无缝循环。

内容的提问来源于stack exchange，提问作者The Real Dude