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

score 1 · Answer 1 · answered Jan 27 '21 at 02:38

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.

answered Jan 27 '21 at 02:38

Mohammad Mirsafaei

954
1
5
16

I rechecked the html and fixed some extra divs but still the same issue :( – Shaan Jan 27 '21 at 09:14
1

@Shaan I checked your website and find out that there are 3 div elements with class of `owl item cloned` that make this mess. If you delete them in inspect element it will be fine. Look at this link cause it's like your problem https://stackoverflow.com/questions/33119078/cloned-items-in-owl-carousel – Mohammad Mirsafaei Jan 27 '21 at 10:39
Bravo ! I just read out the answer you mentioned and changed the value of loop to false and it worked ! Thanks a lot Bro. GOD Bless you. – Shaan Jan 27 '21 at 10:51

Owl Carousel Image render issue in Laravel

1 Answers1