仅在第一个 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
我只会在第一个“旋转木马单元格”处插入 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