Отображение слайдеров на странице slick.js

<div class="item-slides">
<div class="image-slides-wrapper">
    @foreach($school->getImages() as $image)
        <div class="offer__slide">
            <img class="slide" src="{{asset("storage/" . $image)}}" alt="">
        </div>
    @endforeach
</div>
<div class="btn_control">
    <button class="nextBtn"></button>
    <button class="prevBtn"></button>
</div>

Код верстки.

if (sliderWrapper) {
$('.image-slides-wrapper').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    nextArrow: document.querySelector('.nextBtn'),
    prevArrow: document.querySelector('.prevBtn'),
    responsive: [{
        breakpoint: 1035, settings: {
            slidesToShow: 3, slidesToScroll: 1
        }
    },

        {
            breakpoint: 900, settings: {
                slidesToShow: 2, slidesToScroll: 1
            }
        },

        {
            breakpoint: 600, settings: {
                slidesToShow: 1, slidesToScroll: 1
            }
        },]
});

}

Настройки swiper.js

Проблема такая. На страницы с одним слайдером все отрабатывает как надо, кнопки прожимается и все листается, но когда слайдеров становится больше одного кнопки перестают реагировать, и работают только драг-ивенты.

Ссылка на один айтем: http://127.0.0.1:8001/saint-petersburg/federalnaya-avtoshkola-perekrestok

Ссылка на лист-айтемов: http://127.0.0.1:8001/search?city=saint-petersburg&district=&metro=&category=b