首页 > 解决方案 > 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>

标签: laravellaravel-7

解决方案


试试这个:

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

推荐阅读