Dynamic Sliders In Laravel

Question

I'm trying to make a basic slide with Laravel.

Must be active in the class part of the first slide. I'm trying this code but it didn't work. because it adds active to the class of all slides. what is the solution to this problem?

@foreach($slides as $slayt)
<div class="carousel-item active">
            <img src="{{ $slayt->image }}" alt="slide">
    <div class="container">
      <div class="carousel-caption">
        <h3>{{ $slayt->title }}</h3>
        <p>{{ $slayt->body }}</p>
      </div>
    </div>
  </div>
@endforeach

My original HTML code:

<div id="myCarousel" class="carousel slide pointer-event" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class=""></li>
      <li data-target="#myCarousel" data-slide-to="1" class=""></li>
      <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>

    <div class="carousel-inner">
      
      <div class="carousel-item active">
                <img src="http://localhost:8000/storage/slides/January2021/YFgRC9i7iepG0S5aCph3.jpg" alt="slide">
        <div class="container">
          <div class="carousel-caption">
            <h3>Birinci Slayt</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>

      <div class="carousel-item">
                <img src="http://localhost:8000/storage/slides/January2021/YFgRC9i7iepG0S5aCph3.jpg" alt="slide">
        <div class="container">
          <div class="carousel-caption">
            <h3>İkinci Slayt</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>

      <div class="carousel-item">
                <img src="http://localhost:8000/storage/slides/January2021/YFgRC9i7iepG0S5aCph3.jpg" alt="slide">
        <div class="container">
          <div class="carousel-caption">
            <h3>Üçüncü Slayt</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>

    </div>


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

Answer 1

To not replicate the whole html you could also just include the active class in your if check

@foreach($slides as $slayt)
    <div class="carousel-item @if($loop->first) active @endif">
        <img src="{{ $slayt->image }}" alt="slide">
        <div class="container">
            <div class="carousel-caption">
                <h3>{{ $slayt->title }}</h3>
                <p>{{ $slayt->body }}</p>
            </div>
        </div>
    </div>
@endforeach