javascript - Owl Carousel Image render issue in Laravel

Question

I've saved the cars into database and now wanted to show them in a carousel. I' m working with Owl Carousel and fetching the cars dynamically under the title Classic Cars. The issue is that I' m getting extra large space from nowhere between the Carousel and bullets.

I don't know how can I fix that.

Demo: https://thecarchain.com/marketplace

Blade

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

JavasScript

//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
                    }
                }
            });

question from:https://stackoverflow.com/questions/65908434/owl-carousel-image-render-issue-in-laravel

Answer 1

I think it's because your html. You opened a section tag and 2 other div tags before foreach loop, but after loop you closed many div tags.