仅在第一个 carousel-cell(flickity)上添加 class

Add class only on first carousel-cell (flickity)

我只会在第一个“旋转木马单元格”处插入 class“不透明度”。

对于循环中的其余部分,它们不应该存在。

<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>

您可以使用 $loop->first 变量仅在循环的第一次迭代中添加 class。

像这样:<div class="carousel-cell {{ $loop->first ? 'opacity' : '' }}">

在此处查看更多信息: https://laravel.com/docs/9.x/blade#the-loop-variable