如何在 laravel 中导入多轮播项目滑块?
How to import multi carousel item slider in laravel?
如何在laravel中导入多轮播项目滑块?
我已尝试通过此解决方案更改我的代码 PHP Laravel 中的动态轮播仅显示四个图像但没有工作
<div class="row">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@foreach($galleries as $value)
<li data-target="#carouselExampleCaptions" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
@endforeach
</ol>
<div class="carousel-inner">
@foreach($galleries->chunk(4) as $galleryCollection)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
@foreach ($galleryCollection as $gallery)
<div class="col-md-3">
<img src="{{ asset('images/galleries/'.$gallery->image) }}" class="d-block w-100">
</div>
@endforeach
</div>
@endforeach
</div>
<a class="carousel-control-prev" 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" 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>
</div>
</div>
我 运行 相同的代码和一切 运行 完美。
<div class="row-fluid my-5">
<div id="productSlider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
@foreach($products->chunk(7) as $productCollections)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<div class="row">
@foreach($productCollections as $product)
<div class="col mx-1 my-5">
<img class="img-fluid" width="200" heibght="350" src="{{ asset('uploads/product/' . $product->image) }}" alt="{{ $product->name }}">
</div>
@endforeach
</div>
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="#productSlider" 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="#productSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
你检查过代码触发时有没有出现具体的错误。
如何在laravel中导入多轮播项目滑块?
我已尝试通过此解决方案更改我的代码 PHP Laravel 中的动态轮播仅显示四个图像但没有工作
<div class="row">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@foreach($galleries as $value)
<li data-target="#carouselExampleCaptions" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
@endforeach
</ol>
<div class="carousel-inner">
@foreach($galleries->chunk(4) as $galleryCollection)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
@foreach ($galleryCollection as $gallery)
<div class="col-md-3">
<img src="{{ asset('images/galleries/'.$gallery->image) }}" class="d-block w-100">
</div>
@endforeach
</div>
@endforeach
</div>
<a class="carousel-control-prev" 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" 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>
</div>
</div>
我 运行 相同的代码和一切 运行 完美。
<div class="row-fluid my-5">
<div id="productSlider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
@foreach($products->chunk(7) as $productCollections)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<div class="row">
@foreach($productCollections as $product)
<div class="col mx-1 my-5">
<img class="img-fluid" width="200" heibght="350" src="{{ asset('uploads/product/' . $product->image) }}" alt="{{ $product->name }}">
</div>
@endforeach
</div>
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="#productSlider" 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="#productSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
你检查过代码触发时有没有出现具体的错误。