laravel - bootstrap和laravel的图片轮播中只显示一张图片
问题描述
我正在尝试在引导轮播中显示图像,但无法循环。只显示了一张图片,但没有滑动。我在后端使用 laravel。如果可以,请提供帮助,这是代码。这是代码:
<div class="container">
<div class="row">
<div id="imageCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@foreach($images as $value)
<li data-target="#imageCarouselIndicator" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
@endforeach
</ol>
<div class="carousel-inner">
<h3>{{$product->title}}</h3>
@foreach($images as $image )
<div class="item image {{ $loop->first ? 'active' : '' }}">
<div class="carousel-item active">
<img src="/images2/{{$image->filename}}" alt="{{$image->title}}">
</div>
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="#imageCarousel" 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="#imageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
解决方案
试试这个:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach($images as $image )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img src="/images2/{{$image->filename}}"/>
</div>
@endforeach
</div>
</div>
推荐阅读
- javascript - 有没有办法使用javascript激活右键单击浏览器的滚动条
- python - 在图像上绘制曲线
- python - Points to Walls Tab 使用 Matplotlib 或 Seaborn 绘制 3D 散点图
- reactjs - 背景不会在响应式 tailwindcss 中调整大小
- angular - FormArray 中的验证问题
- python - Panda to_datetime 引发警告:tzname CET 已识别但不理解
- c# - System.Windows.Forms.Screen 在显示更改后未更新
- amazon-ec2 - 如何使用 Boto3 将工作负载从一个 ec2 实例迁移到另一个实例
- python - 如何模拟本地 aws 上下文进行测试
- google-places-api - Google maps-places api 找不到类型:鱼塘