Laravel 中的动态轮播不起作用仅显示一张图像
我正在尝试在 laravel 中创建一个动态轮播，但我只看到一张图片。我已经寻找了很多小时的解决方案，但我仍然被卡住了
我试图从这个解决方案中更改我的代码Laravel 中的 Dynamic carousel 只显示一张图片但没有用
home.blade.php 代码
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"> </li>
</ol>
<div class="carousel-inner" role="listbox">
@foreach($sliders as $slider)
<div class="carousel-item active">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
@endforeach
<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>
master.blade.php 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>1233</title>
任何帮助将不胜感激。
慕沐林林3回答
-
BIG阳
为什么它不起作用的问题是因为循环@foreach($sliders as $slider) <div class="carousel-item active"> <img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="..."> </div>@endforeach正在active为所有图像添加类。您只需要在单个图像上处于活动状态，您可以使用像这样的一些 php 解决方法在单个图像上设置为活动状态。<div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> </ol> <div class="carousel-inner"> @foreach($sliders as $key => $slider) <div class="carousel-item {{$key == 0 ? 'active' : '' }}"> <img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="..."> </div> @endforeach </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>你也忘了关闭<div class="carousel-inner"></div>标签。 -
不负相思意
<div class="carousel-item {{$loop->iteration == 1 ? 'active' : ''}}">
随时随地看视频慕课网APP
PHP