Laravel - Bootstrap : Carrousel avec plusieurs items et colonnes

Introduction

Bootstrap est un framework CSS qui fournit des classes pour styliser les composants de l’interface utilisateur (UI) HTML tels que les menus de navigation, les formulaires, les boutons, les carrousels, les couleurs d'arrière-plan, les couleurs de texte, etc.

Le composant Bootstrap que nous allons utiliser dans ce guide est le « carrousel » (« carousel » en anglais). Un carrousel permet d'afficher des diapositives (ou slides) ou des éléments (images, paragraphes, etc.) sur une diapositive avec des transitions (ou animations) et des contrôles (suivant, précédent, etc.).

Nous voulons voir comment récupérer les données d'un modèle Laravel sous forme d'une collection pour les afficher sur une vue (template Blade) dans un carrousel « .carousel » Bootstrap 5 en présentant des items (slides) « .carousel-item » contenant des colonnes « .col-{breakpoint}-{size} multiples.

Au moment de la rédaction de cet article, j’utilise la version Laravel 9.33.0 et Bootstrap 5.2.1.

Carrousel Bootstrap avec plusieurs éléments

Considérons que Bootstrap 5 CSS et JS sont installés dans une vue (template Blade) à partir des liens CDN :

<!-- Boostrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

Pour afficher un carrousel Bootstrap « .carousel » avec plusieurs éléments (items) « .carousel-item » dans lesquels on a plusieurs colonnes responsives « .col-{lg|md|sm|xs}-{2,3,4,6,12} » dans une « .row », nous pouvons procéder comme suit :

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true" >

    <!-- Les indicateurs (slide actif) du carousel -->
    <div class="carousel-indicators" >
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <!-- Les slides du carousel -->
    <div class="carousel-inner">

        <!-- Slide 1 (slide actif) -->
        <div class="carousel-item active">

            <!-- La row -->
            <div class="row" >

                <!-- Les colonnes responsives : N colonnes -->
                <div class="col-md-3 col-sm-6 col-6" ></div>
                <div class="col-md-3 col-sm-6 col-6" ></div>
                <div class="col-md-3 col-sm-6 col-6" ></div>
                <div class="col-md-3 col-sm-6 col-6" ></div>

            </div>

        </div>

        <!-- Slide 2 -->
        <div class="carousel-item"></div>

        <!-- Slide 3 -->
        <div class="carousel-item"></div>

    </div>

    <!-- Les boutons suivant et pécédent -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

</div>

Obtenir la collection d'un modèle dans Laravel

Utilisons la table « users » dont le schéma est décrit par la migration /databases/migrations/…_create_users_table.php :

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->timestamp('email_verified_at')->nullable();
    $table->string('password');
    $table->rememberToken();
    $table->timestamps();
});

Nous voulons récupérer le nom « name » et l'adresse email « email » des utilisateurs inscrits dans cette table et les afficher dans le carrousel. Pour cela, nous pouvons utiliser le modèle /App/Models/User.php pour obtenir les entrées sous forme de collection à envoyer à la vue :

// On récupère les utilisateurs
$users = User::select('name', 'email')->get();

// On envoie la collection à la vue 
return view('welcome', compact('users'));

Organiser la collection avec l’helper chunk()

Nous venons de récupérer les entrées de la table « users » sous forme de collection. Pour les afficher en colonnes responsives dans un item (diapositve) d’un carrousel Bootstrap, nous devons les organiser à l'aide de l’helper chunk().

La fonction chunk($nombre) retourne les données d'une collection en groupes ou morceaux (« chunks ») de  $nombre :

// Nombre des colonnes "col-{breakpoint}-{size}" par diapositive
$cols_per_slide = 50;

// On récupère les utilisateurs qu'on groupe (chunk) en 50 par diapositive
$users = User::select('name', 'email')->get()->chunk($cols_per_slide);

// On envoie la collection à la vue 
return view('welcome', compact('users'));

La variable $cols_per_slide représente le nombre d'éléments (colonnes) à  afficher dans une diapositive (slide). Nombre de slides (chunks) = nombre d'entrées dans la table « users » / $cols_per_slide.

Pour une table avec 182 entrées, nous obtenons 4 chunks ou diapositives, soit round(182/50) :

Afficher la collection dans le carrousel

Maintenant que nous avons les différentes diapositives (chunks) et leurs collections, nous pouvons les afficher dans un carousel Bootstrap sur un template Blade Laravel en parcourant les chunks avec la directive @foreach ... @endforeach.

Commençons par les indicateurs « .carousel-indicators ». Ils indiquent la position de la diapositive ative en affichant des barres au bas du carrosel :

<!-- On parcourt les parties (chunks) pour afficher les indicateurs -->
<div class="carousel-indicators" >

    @foreach ($users as $users_chunk)
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $loop->index }}" @if(!$loop->index) class="active" @endif aria-current="true" aria-label="Slide {{ $loop->iteration }}"></button>
    @endforeach

</div>

On parcourt les chunks pour afficher un bouton <button> par lequel on indique l'index du slide correspondant via l'attribut data-bs-slide-to="{{ $loop->index }}" et on ajoute la classe « active » si $loop->index == 0 ou !loop->index.

Ensuite nous avons les items (slides) du carousel et leurs contenus :

<!-- Les slides du carousel -->
<div class="carousel-inner">

    <!-- On parcourt les parties (chunks) de la table "users" -->
    @foreach ($users as $users_chunk)

    <!-- On ajoute la classe "active" sur le premier slide (chunk) -->
    <div class="carousel-item @if($loop->first) active @endif">

        <!-- La row -->
        <div class="row" >

            <!-- On affiche chaque "user" dans une colonne responsive -->
            @foreach ($users_chunk as $user)
            <div class="col-md-3 col-sm-6 col-6" >
                <div class="p-3 mb-3 rounded bg-light " >
                    <p class="mb-0" >{{ $user->name }}</p>
                    <span class="text-secondary" >{{ $user->email }}</span>
                </div>
            </div>
            @endforeach

        </div>

    </div>
    @endforeach

</div>

On parcourt les chunks pour afficher chaque item « .carousel-item » et on ajoute la classe « active » à la première diapositive si nous sommes à la première itération $loop->first == true

<div class="carousel-item @if($loop->first) active @endif">

Dans chaque chunk ou « .carousel-item », on parcourt la collection d'entrées de la table « users » pour afficher chaque élément dans une colonne responsive <div class="col-md-3 col-sm-6 col-6" >, les tout dans un <div class="row" >. 

Portez-vous bien 😉