Add class only on first carousel-cell (flickity)

i would have the class “opacity” inserted only at the first “carousel-cell”.

For the rest in the loop, they should not be there.

<div class="main-carousel">
            @foreach($projects as $p)
                @if($p->getMedia('teaser')->first() ?? "")
                    <div class="carousel-cell">
                        <div class="row">
                            <div id="project-info" class="col-lg-3 text-md-right pr-md-5 project-info">
                                <div class="project opacity">
                                    <h2 class="project-title mb-0">{{$p->name}}</h2>
                                    <h3 class="project-category"><a href="#">Foto</a> / <a href="#">Video Produktion</a></h3>
                                </div>
                            </div>
                            <div class="col-lg-9 project-img opacity">

                                <a href="{{url('projects')}}/{{$p->slug}}">
                                    <div class="start-teaser">
                                        <img src="{{asset('storage')}}/{{$p->getMedia('teaser')->first()->id}}/{{$p->getMedia('teaser')->first()->file_name}}"  alt="Land Rover">
                                    </div>
                                </a>

                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>

Answer

You could use the $loop->first variable to add a class only on the first iteration of the loop.

Like this: <div class="carousel-cell {{ $loop->first ? 'opacity' : '' }}">

See more here: https://laravel.com/docs/9.x/blade#the-loop-variable

Advertisement

Answer