旋转木马不工作时，使用循环 - carousel is not working when using with loop

我正在使用旋转木马滑动图像。当我使用静态图像时，它工作得很好，但是当我将它与数据库中的数据一起使用时，它只显示第一个元素而不是滑动。当我点击箭头时，它也不会向左或向右移动。

我的视图代码是:

<div  class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
@foreach($carousel as $index =>$image)
<div class="carousel-inner" ><!-- Inner wrapper for slides -->
    <div class="item @if($index == '1'){{'active'}}@endif"> <!-- First item slider -->
        <img src="{{  url('images/photos').'/'.$image->photo_name}}"> <!-- First item background image slider -->
        <div class="carousel-caption overlay">
            <div class="content">
                <div class="text wow bounceIn animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-name: bounceIn; -webkit-animation-name: bounceIn;">
                    <h1>{{$image->category_name.' photography'}}</h1>
                </div>
            </div>
        </div> <!-- End first item background image slider -->
    </div> <!-- End first item slider -->
</div>
    @endforeach
<!-- Controls -->
<div class="arrow">
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span><img src="{{ url('user/image/left.png')}}"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span><img src="{{ url('user/image/right.png')}}"></span>
    </a>

div <div class="carousel-inner" role="listbox">应该在foreach之外，因为它是幻灯片项的包装器，不应该用于每张幻灯片。

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

<div class="carousel-inner" ><!-- Inner wrapper for slides -->
@foreach($carousel as $index =>$image)
    <div class="item @if($index == '1'){{'active'}}@endif"> <!-- First item slider -->
        <img src="{{  url('images/photos').'/'.$image->photo_name}}"> <!-- First item background image slider -->
        <div class="carousel-caption overlay">
            <div class="content">
                <div class="text wow bounceIn animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-name: bounceIn; -webkit-animation-name: bounceIn;">
                    <h1>{{$image->category_name.' photography'}}</h1>
                </div>
            </div>
        </div> <!-- End first item background image slider -->
    </div> <!-- End first item slider -->
    @endforeach
</div>

<!-- Slide -->
<div class="carousel-inner">
  @foreach($viewhomeslide as $key => $slider)
  <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
    <img
      src="{{url('assets/img/slide/', $slider->imgslide)}}"
      class="d-block w-100"
      alt="..."
    />
    <div class="carousel-container">
      <div class="container">
        <h2 class="animate__animated animate__fadeInDown">
          <?= $slider ['title'] ?>
        </h2>
        <p class="animate__animated animate__fadeInUp">
          <?= $slider ['description']?>.
        </p>
        <a
          href="#about"
          class="btn-get-started animate__animated animate__fadeInUp scrollto"
          >Read More</a
        >
      </div>
    </div>
  </div>
  @endforeach
</div>