如何修复foreach循环在Carousel Bootstrap 4中两次打印数据

时间:2019-09-06 13:20:48

标签: html css bootstrap-4

我正在遍历$slides的所有returns数据库中的幻灯片。

旋转木马工作得很好。

我的数据库中存储了标题和第二个标题。

所以当我循环播放时,我会获得标题为ok的幻灯片。当我添加另一张幻灯片时,我得到了新幻灯片中最后一张幻灯片的最后一个标题和第二个标题。

像这样:

screen shot

返回服务提供商中的所有幻灯片:


 View::composer('main', function ($view) {
            $view->with('slides', Slide::all());
        });

我的轮播:


<div id="myCarousel" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators">
      @foreach($slides as $slider)
      <li data-target="#myCarousel" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
      @endforeach
   </ol>
   <div class="carousel-inner">
      @foreach($slides as $s)
      <div class="carousel-item {{ $loop->first ? 'active' : '' }} carousel-image" style="background-size: cover;">
         <picture>
            <source srcset="{{asset('images/slides/main/'.$s->slideshow)}}" media="(min-width: 1400px)">
            <source srcset="{{asset('images/slides/main/'.$s->slideshow)}}" media="(min-width: 768px)">
            <source srcset="{{asset('images/slides/main/'.$s->slideshow)}}" media="(min-width: 576px)">
            <div style="background-image:url('{{asset('images/slides/main/'.$s->slideshow)}}');" class="d-block w-100 img-fluid carousel-image"></div>
         </picture>
         <div class="container">
            <div class="carousel-caption  text-center  animated fadeInUp  d-flex flex-column h-100 align-items-center justify-content-center">
               <h1 class="display-4">{{$s->title_slide}}</h1>
               <p class="lead">{{$s->title_p}}</p>
            </div>
         </div>
      </div>
      @endforeach
   </div>
</div>


我在做什么错了?

0 个答案:

没有答案