如何解决滚动图像时滑块空白问题？

问题描述

我正在使用轮播滑块。从一张图片滚动到下一张图片时出现空白。

如何解决空白的问题？

这是我的滑块刀片代码：

<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>