如何解决Laravel Carousel 动态与轮播类别数组
我的类别测试滑块在图片中以这种方式显示,即图像显示在彼此下方 enter image description here...我试过用另一个类别更改类别测试,但我无法修复它..我想问题可能是如何先显示活动图像幻灯片,然后再显示其余内容
我的视图刀片是
@foreach ($data['testSlider'] as $slide )
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="w-100 d-block" id="imgslide" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class=""></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
</div>
@endforeach
我的滑块控制器有
use Illuminate\Http\Request;
use App\Models\website\backend\Slider;
use App\Models\website\backend\SliderCategory;
public function test()
{
$data['slider'] = Slider::all();
$data['slidercategory'] = SliderCategory::all();
$data['testSlider'] = Slider::with([
'SliderCategory' => function ($attachmentQuery) {
$attachmentQuery->where('title','test Slider');
}
])->get();
return view('testboot',compact('data'));
}
解决方法
您的图片是重复的,因为您要为每张图片制作一个完整的轮播图,而不是将图像添加到第一个轮播图。
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
@foreach ($data['testSlider'] as $slide )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="w-100 d-block" id="imgslide-{{$loop->index}}" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
@endforeach
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
@foreach ($data['testSlider'] as $slide )
<li data-target="#carousel-1" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
@endforeach
</ol>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。