我正在尝试在 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阳
TA贡献1859条经验 获得超6个赞
为什么它不起作用的问题是因为循环
@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>标签。
- 3 回答
- 0 关注
- 263 浏览
添加回答
举报
0/150
提交
取消