如何解决如何解决滚动图像时滑块空白问题?
如何解决空白的问题?
这是我的滑块刀片代码:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach ($image_info as $item)
@if ($item->key == 'banner1' )
<div class="carousel-item active">
<img class="d-block w-100"
src="{{ asset('storage/'.$item->image_url) }} " alt="alternative">
</div>
@endif
@endforeach
@foreach ($image_info as $item)
@if ($item->key == 'banner2' )
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('storage/'.$item->image_url) }} " alt="alternative">
</div>
@endif
@endforeach
@foreach ($image_info as $item)
@if ($item->key == 'banner3' )
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('storage/'.$item->image_url) }} " alt="alternative">
</div>
@endif
@endforeach
</div>
<a class="carousel-control-prev" href="#carouselExampleControls"
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="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
解决方法
如上所述,您只需要一个 foreach
循环,您可以检查 `'banner1' 的条件并在循环中应用活动类。
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach ($image_info as $item)
<div class="carousel-item @if($item->key == 'banner1') active @endif">
<img class="d-block w-100"
src="{{ asset('storage/'.$item->image_url) }}" alt="alternative">
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="#carouselExampleControls"
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="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。