display 6 elements two by two in a carousel

Question

I have an SQL query that allows to organize 6 items in descending order based on their creation date, I want to display these items two by two in a carousel, but i don't know how.. Is there a way to make it?

class HomeController extends Controller
{
    public function index()
    {   
        $projets = Projet::orderBy('created_at', 'desc')->take(6)->get();

        return View('home')->with('projets', $projets);
    }

}

My Carousel Code

<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">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row">
                                @for ($i = 0; $i < 2; $i++)
                                    <div class="col-lg-6">
                                        @include('layouts.projet')
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="row">
                                @for ($i = 0; $i < 2; $i++)
                                    <div class="col-lg-6">
                                        @include('layouts.projet')
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="row">
                                @for ($i = 0; $i < 2; $i++)
                                    <div class="col-lg-6">
                                        @include('layouts.projet')
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </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>

desired result : enter image description here

You can refer this https://codepen.io/mephysto/pen/ZYVKRY or this https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once — RioSant, Jun 06 '22 at 12:24
So ```layouts.projet``` blade file contains the contains 2 cards right — ManojKiran A, Jun 06 '22 at 13:00
Pls refer to the docs here https://laravel.com/docs/9.x/collections#method-chunk — ManojKiran A, Jun 06 '22 at 13:01

score 0 · Accepted Answer · answered Jun 07 '22 at 09:48

Use the chunk method of a collection to create chunks of a given size. The following code works nicely for incomplete chunks as well (say a collection of length 7 would result in 2-2-2-1):

https://laravel.com/docs/9.x/collections#method-chunk

@foreach ($collection->chunk(2) as $i => $chunk)
    <div class="carousel-item {{ !$i ? 'active' : '' }}">
        <div class="row">
            @foreach ($chunk as $item)
                <div class="col-lg-6">{{ $item->name }}</div>
            @endforeach
        </div>
    </div>
@endforeach

or, do it the native way using:

@for($i = 0; $i < $collection->count(); $i+=2)
    <div class="carousel-item {{ !$i ? 'active' : '' }}">
        <div class="row">
            <div class="col-lg-6">
                {{ $collection[$i] }}
            </div>
            @if($i+1 < $collection->count())
                <div class="col-lg-6">
                    {{ $collection[$i+1] }}
                </div>
            @endif
        </div>
    </div>
@endfor

Note the extra @if statement to check whether the $+1 is actually still in array bounds.

display 6 elements two by two in a carousel

1 Answers1