Laravel 5.6+Bootstrap轮播图foreach循环仅首项可切换问题求助

兄弟，我懂你期末复习忙到昏头的状态！这种Bootstrap轮播的小坑我以前也踩过，结合你的情况，大概率是循环的时候破坏了Bootstrap轮播的正确结构，给你捋捋常见问题和修复方案：

Bootstrap轮播靠唯一的id来控制切换逻辑，如果你在foreach里重复生成了整个轮播容器（比如把<div class="carousel slide">也放进循环里），就会导致每个项目都变成独立的小轮播，自然没法一起切换。

错误示例：

@foreach($projects as $project)
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">...</div>
    </div>
  </div>
@endforeach

正确逻辑：轮播容器只写一次，把foreach放在carousel-inner内部，专门遍历轮播项。

Bootstrap轮播必须有一个初始激活的项，如果你给每个循环的轮播项都加了active，或者漏给第一个加，都会导致切换异常。可以用循环索引来判断：

正确代码示例：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <!-- 轮播内容容器 -->
  <div class="carousel-inner">
    @foreach($projects as $index => $project)
      <!-- 只有第一个项加active类 -->
      <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
        <img class="d-block w-100" src="{{ $project->image_path }}" alt="{{ $project->name }}">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{ $project->name }}</h5>
          <p>{{ $project->description }}</p>
        </div>
      </div>
    @endforeach
  </div>

  <!-- 切换按钮 -->
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

切换按钮的href（或data-target）必须和轮播容器的id完全匹配，比如上面例子里按钮的href="#carouselExampleControls"对应容器的id="carouselExampleControls"，如果循环里不小心修改了id值，就会导致按钮找不到对应的轮播容器。

虽然你说功能基本正常，但还是要核对一下Laravel里的资源引入：

• 在resources/assets/js/app.js里是否导入了Bootstrap：

import 'bootstrap';

• 在resources/assets/sass/app.scss里是否导入了Bootstrap样式：

@import '~bootstrap/scss/bootstrap';

并且运行过npm run dev或npm run prod编译资源。

对照上面的点调整你的代码，应该就能解决只有第一个项能切换的问题了！

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