laravel - 滑块图像不滑动
问题描述
我已经使滑块图像动态化,但不幸的是,滑块图像不会滑动,只是第一个图像显示在滑块上。我怎样才能做到这一点?
<div class="bd-example heroBackground ">
<div id="carouselExampleCaptions" class="carousel slide bg-height" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner heroImage ">
@foreach($slider as $sliders)
<div class="carousel-item active heroImage ">
<div
style="background: url({{config('e_soft.file_url').$sliders->slider_image}})
center center no-repeat; background-size: cover; width: 100%; height: 100%;">
</div>
</div>
@endforeach
</div>
<!--end carousel-inner-->
</div>
<a class="carousel-control-prev icon-box" href="#carouselExampleCaptions"
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 icon-box" href="#carouselExampleCaptions"
role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
控制器
public function index()
{
$data=([
'slider'=>SLiders::all(),
'Navigation'=>Navigations::orderBy('sort_position', 'ASC')-
>get(),
'services'=>Services::all(),
'Product'=>Products::all(),
'client'=>Clients::all(),
'setting'=>Settings::all()
]);
return view('front_end.index',$data);
}
}
解决方案
@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
推荐阅读
- php - Scandir 递归到具有多维“数组”的 Json
- python-3.x - 将 csv 文件上传到 s3 存储桶时出错 - com.amazonaws.services.s3.model.AmazonS3Exception:状态代码:400
- kotlin - 如何确保异步测试不会干扰另一个?
- spring-boot - javax.net.ssl.SSLException: SSLEngine 已关闭 SSLEngine 已在 webclient (Springboot) 中关闭
- wifi-direct - 如何使用wifi直接将数据从android传输到ios?
- python - Numpy数组,掩码填充
- python - Django For Loop循环打印数据
- python - 如何检查 Python 对象中的任何元素是否为空
- jquery - 如何使用 requirejs 在 webjars 中引用 jQuery 库
- apache-kafka - 镜像重新分区主题的大小不断增加