Почему моя карусель создает проблемы, если в ней больше слайдов?

Question

Я использовал карусель сов в своем проекте. Проблема в том, что карусель теперь создает проблему. В моем проекте Laravel есть следующий код.

<div id="news" class="owl-carousel">
    <div class="col-sm-12">
        <h4 class=" title--line__black"><a href="{{ route('category', 'music') }}">Music  </a></h4>
        <div class="block-newsCat--list">
          @if(!empty($music->posts))
          @foreach($music->posts as $key => $value)
            @include('frontend.layouts.layout-one')
          @endforeach
          @endif
        </div>
    </div>
    <div class="col-sm-12">
        <h4 class=" title--line__black"><a href="{{ route('category', 'fashion') }}">Fashion  </a></h4>
        <div class="block-newsCat--list">
          @if(!empty($fashion->posts))
          @foreach($fashion->posts as $key => $value)
            @include('frontend.layouts.layout-one')
          @endforeach
          @endif
        </div>
    </div>
    <div class="col-sm-12">
        <h4 class=" title--line__black"><a href="{{ route('category', 'hollywood') }}">Hollywood  </a></h4>
        <div class="block-newsCat--list">
          @if(!empty($hollywood->posts))
          @foreach($hollywood->posts as $key => $value)
            @include('frontend.layouts.layout-one')
          @endforeach
          @endif
        </div>
    </div>
    <div class="col-sm-12">
        <h4 class=" title--line__black"><a href="{{ route('category', 'bollywoood') }}">Bollywood  </a></h4>
        <div class="block-newsCat--list">
          @if(!empty($bollywood->posts))
          @foreach($bollywood->posts as $key => $value)
          @php
            if($key == 6){
                break;
            }
          @endphp
            @include('frontend.layouts.layout-one')
          @endforeach
          @endif
        </div>
    </div>
    <div class="col-sm-12">
        <h4 class=" title--line__black"><a href="{{ route('category', 'tollywood') }}">Tollywood  </a></h4>
        <div class="block-newsCat--list">
          @if(!empty($tollywood->posts))
          @foreach($tollywood->posts as $key => $value)
            @include('frontend.layouts.layout-one')
          @endforeach
          @endif
        </div>
    </div>
    <div class="col-sm-12">
        <h4 class=" title--line__black"><a href="{{ route('category', 'kollywood') }}">Kollywood  </a></h4>
        <div class="block-newsCat--list">
          @if(!empty($kollywood->posts))
          @foreach($kollywood->posts as $key => $value)
            @include('frontend.layouts.layout-one')
          @endforeach
          @endif
        </div>
    </div>
  <div>
</div>

Итак, у меня есть пять разных категорий для отображения в карусели, и он используется для отображения 4 категорий на первом слайде и 2 другие категории на втором. За последние 2 дня карусель не дает ожидаемого результата. Чтобы увидеть, что все CSS и js работают, мне нужно удалить 2 категории.

У меня есть этот код в файле js.

$("#news").owlCarousel({
        items: 4,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [980, 2],
        itemsMobile: [550, 1],
        pagination: !0,
        autoPlay: !0,
        responsiveClass: !0
    })

Я использую версию owl-carousel 1.3.3.

Если я сохраню все категории, то файлы CSS и JS не работают. Может ли кто-нибудь помочь мне с этой проблемой?