Laravel实现6条项目数据按创建时间倒序两两分组轮播展示

核心逻辑是先将查询到的6条项目数据按每组2条拆分，再动态渲染轮播指示器和轮播项，替换原有硬编码的重复结构，同时正确传递单个项目数据到子视图。

第一步：修改后端控制器逻辑 #

使用Laravel集合的chunk方法，将查询到的6条项目自动拆分为3个长度为2的分组，直接传递分组后的数据到视图，避免前端计算索引：

class HomeController extends Controller
{
    public function index()
    {   
        // 取最新6条项目，按每组2条拆分
        $projetGroups = Projet::orderBy('created_at', 'desc')->take(6)->get()->chunk(2);

        return view('home')->with('projetGroups', $projetGroups);
    }
}

第二步：重构轮播组件视图 #

替换原有硬编码的指示器、轮播项，通过双层循环渲染内容：第一层遍历分组生成轮播屏，第二层遍历组内项目生成单条项目卡片，注意给第一个轮播项和第一个指示器添加active激活类。

<section class="projects pt-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 text-center">
                <div class="section-header">
                    <h2 class="section-title" style="text-transform: capitalize;">Projets récents</h2>
                    <span class="title-border"></span>
                </div>
            </div>
        </div>
        <div class="row justify-content-center pb-4">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
                <ol class="carousel-indicators">
                    {{-- 动态生成指示器 --}}
                    @foreach($projetGroups as $index => $group)
                        <li data-target="#myCarousel" data-slide-to="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}"></li>
                    @endforeach
                </ol>
                <div class="carousel-inner">
                    {{-- 动态生成轮播屏 --}}
                    @foreach($projetGroups as $index => $projets)
                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                            <div class="row">
                                {{-- 渲染当前组的2个项目 --}}
                                @foreach($projets as $projet)
                                    <div class="col-lg-6">
                                        {{-- 传递当前项目数据到子视图 --}}
                                        @include('layouts.projet', ['projet' => $projet])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="text-center pt-5">
            <a href="{{ route('projets') }}" class="viewprojects-btn">Voir tous les projets&nbsp;&nbsp;<i
                    class="fas fa-arrow-right"></i></a>
        </div>
    </div>
</section>

注意事项 #

• 确认layouts/projet.blade.php子视图中，使用传入的$projet变量渲染项目封面、标题、跳转链接等内容，不要使用固定写死的测试内容
• 该写法支持后续灵活调整每组展示数量，只需修改控制器中chunk()方法的参数即可，比如改成chunk(3)就会变成每屏3个项目、共2屏轮播，无需修改视图结构
• 最终可实现每屏展示2个项目、共3屏自动轮播的效果，和预期展示逻辑完全匹配

内容的提问来源于stack exchange，提问作者scélérat