javascript - Laravel 中的猫头鹰轮播图像渲染问题

Question

我已将汽车保存到数据库中，现在想在轮播中展示它们。我正在使用 Owl Carousel 并在Classic Cars标题下动态获取汽车。问题是我在旋转木马和子弹之间不知从哪里得到了超大的空间。

我不知道我该如何解决。

演示：https ://thecarchain.com/marketplace

刀

 <section class="recommended-slider-wrapper">
     <div class="row">
        <div class="owl-carousel owl-theme recommended-box-slider">
          
           @foreach($classic as $row)
             <div class="item">
               <div class="recommended-box">
                  <div class="img-slider">
                    <span class="for-sale">
                      <p class="fore-sale-text">{{ __('For Sale')}}</p>
                    </span>
                <div>
             <div class="owl-carousel owl-theme inner-img-slider">
              @if (count($row->images)>0)
              @foreach($row->images as $images)
                <div class="item">
                   <img src="{{ asset('mypath/ImagesP'.$row->product.'/'.'u_'. $row->user_id.'/'.'qr_'.$row->id.'/' . $images->name) }}" alt="recomanded-1" class="card-img-top">
                 </div>
              @endforeach
               @endif
                  </div>
                </div>
              </div>
             
            <div class="recommended-box-text">
              <div class="card-body-content">
                 <a href="{{route('myRoute',[$row->id,$row->product])}}">
                 <h4>{{$row->make}} {{$row->model}} {{$row->trim}} {{ __("$row->car_body")}}</h4>
                 </a>

             <span>{{$row->manufact_year}} - @if($row->price && $row->currency){{$row->price}} {{$row->currency}}@else {{ __('Price on Request')}}@endif
           </span>
               <div>
                 <i class="fas fa-map-marker-alt mr-1"></i>
                   {{$row->address}}
                                           
          </div>
         </div>                                        
                                        
     </div>
    </div>
    </div>
     @endforeach

    </div>
   </div>
   </div>
  </div>
  </div>
 </div>
</section>

JavaScript

//Main Carousel Code
        $(function() {
            'use strict';
            $('.recommended-box-slider').owlCarousel({
                loop:true,
                dots: true,
                items:3,
                nav:false,
                dotsEach:true,
                margin:10,
        
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:2
                    },
                    1000:{
                        items:3
                    }
                }
            });
       
    //Show the Car Images inside the Ad 
            $('.recommended-box-slider .inner-img-slider').owlCarousel({
                loop:true,
                loop:true,
                dots: true,
                nav:false,
                dotsEach:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:1
                    },
                    1000:{
                        items:1
                    }
                }
            });

标签： javascriptphplaravelowl-carousel

Answer 1

我认为这是因为你的 html. 您在 foreach 循环之前打开了一个部分标记和 2 个其他 div 标记，但在循环之后您关闭了许多 div 标记。