我试图在Laravel中创建一个动态的carousel,但我看到的只是一个图像。尽管我努力寻找解决方案,但它们似乎都不起作用。请帮助!
这是我的食指刀
@section('content')
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
@foreach($sliders as $key => $slider)
<div class="carousel-item {{$key == 0 ? 'active' : '' }}">
<img class="w-100" src="{{asset($slider->image) }}" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<h1 class="display-1 text-white mb-5 animated slideInLeft">{!! $slider->title !!}</h1>
@if ($slider->subtitle)
<h3 class="display-5 text-white mb-5 animated slideInDown">{!! $slider->subtitle !!}</h3>
@endif
@if ($slider->description)
<h4 class="display-8 text-white mb-5 animated slideInDown">{!! $slider->description !!}</h4>
@endif
@if ($slider->button_link)
<a href="{{asset($slider->button_link) }}" class="btn btn-primary py-sm-6 px-sm-8">Read More</a>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
@endsection
字符串
这是我的控制器。
function index() : View {
$sliders = Slider::where('status', 1)->get();
return view('layout.frontend_layout.index',compact('sliders'));
}
型
1条答案
按热度按时间bpsygsoo1#
你把
@endforeach
放在了错误的位置,把它移到carousel-item
的结束标记之后,它现在的位置太远了。