Laravel动态轮播图异常：仅显示单张图片，求助解决方案

问题定位 #

你的Blade模板中循环结束标记@endforeach的位置错误，导致只有第一个轮播项被包裹在carousel-inner容器内，其余轮播项都被渲染到容器外部，Bootstrap轮播无法识别这些外部元素，因此仅显示第一张图。

原代码的错误结构：

<div class="carousel-inner">
    @foreach($sliders as $key => $slider)
     <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
         <!-- 轮播内容 -->
     </div>

 </div> <!-- 提前闭合了carousel-inner容器 -->
@endforeach <!-- 循环结束在容器外部 -->

修复步骤 #

将@endforeach移动到carousel-inner容器的闭合标签之前，确保所有轮播项都被正确包裹在容器内：

修正后的完整Blade代码：

@section('content')
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
  <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">   
      <div class="carousel-inner">
        @foreach($sliders as $key => $slider)
         <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
             <img class="w-100" src="{{asset($slider->image) }}" alt="Image">
             <div class="carousel-caption">
                 <div class="container">
                     <div class="row justify-content-center">
                         <div class="col-lg-8">
                             <h1 class="display-1 text-white mb-5 animated slideInLeft">{!! $slider->title !!}</h1>

                             @if ($slider->subtitle)
                             <h3 class="display-5 text-white mb-5 animated slideInDown">{!! $slider->subtitle !!}</h3>
                             @endif

                             @if ($slider->description)
                             <h4 class="display-8 text-white mb-5 animated slideInDown">{!! $slider->description !!}</h4>
                             @endif

                             @if ($slider->button_link)
                             <a href="{{asset($slider->button_link) }}" class="btn btn-primary py-sm-6 px-sm-8">Read More</a>
                             @endif
                         </div>
                     </div>
                 </div>
             </div>
         </div>
        @endforeach <!-- 循环结束移至carousel-inner容器内部 -->
      </div> <!-- 现在才正确闭合carousel-inner容器 -->

     <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
         data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </button>
     <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
         data-bs-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
       </button>
   </div>
</div>
@endsection

额外验证项 #

1. 确认数据库中存在多条status=1的Slider记录，可在控制器中临时添加调试代码查看数据：

function index() : View {
    $sliders = Slider::where('status', 1)->get();
    dd($sliders); // 检查返回的数据集是否包含多条记录
    return view('layout.frontend_layout.index',compact('sliders'));
 }

2. 检查页面是否正确引入Bootstrap轮播所需的JS文件，控制台无JS报错。

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