bootstrap 4 carousel with Laravel

Laravel’s Blade templating engine’s @foreach control structure directive has $loop variable which is available inside every @foreach loop.

The $loop variable is a stdClass object that provides meta information about the loop you’re currently inside. Take a look at the properties it exposes:

index: the index of the current item in the loop; Which starts from 0
iteration: the based index of the current item in the loop; Which starts from 1
remaining: how many items remain in the loop; if current item is first of five, would return 2
count: the count of items in the loop
first: boolean; whether this is the first item in the loop
last: boolean; whether this is the last item in the loop
depth: integer; how many “levels” deep this loop is; returns 1 for a loop, 2 for a loop within a loop, etc.
parent: if this loop is within another @foreach loop, returns a reference to the $loop variable for the parent loop item; otherwise returns null

bootstrap 4 carousel with Laravel

We gonna use $loop variable and its properties inside the @foreach loop to build carousel. Below is the example script, where $photos is collection of photos with title, image, description...etc.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
   @foreach( $photos as $photo )
      <li data-target="#carouselExampleIndicators" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
   @endforeach
  </ol>

  <div class="carousel-inner" role="listbox">
    @foreach( $photos as $photo )
       <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
           <img class="d-block img-fluid" src="{{ $photo->image }}" alt="{{ $photo->title }}">
              <div class="carousel-caption d-none d-md-block">
                 <h3>{{ $photo->title }}</h3>
                 <p>{{ $photo->descriptoin }}</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>

@foreach( $photos as $photo )

<li data-target="#carouselExampleIndicators" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>

@endforeach

</ol>

@foreach( $photos as $photo )

<div class="carousel-item {{ $loop->first ? 'active' : '' }}">

<img class="d-block img-fluid" src="{{ $photo->image }}" alt="{{ $photo->title }}">

<h3>{{ $photo->title }}</h3>

<p>{{ $photo->descriptoin }}</p>

</div>

@endforeach

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.