Точки останова Swiperjs не применяются при достижении точек останова ⇐ CSS

[Гость]

Я использую swiperjs и хочу сделать его отзывчивым, используя свойство точек останова. Однако значение по умолчанию для слайдовPerView не применяется, когда экран достигает значения, меньшего, чем точка останова. Когда я тестирую отдельный html-файл, точки останова работают нормально, но не в моем проекте laravel. Я использую cdn в качестве источника для swiper, вот мой код:
Мой js для инициализации swiper
var swiper = new Swiper('.history-swiper', {
// Optional parameters
slidesPerView: 2,
spaceBetween: 10,

breakpoints: {
975: {
slidesPerView: 2
}
},

// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
});

var swiper_index = new Swiper('.index-swiper', {
// Optional parameters
slidesPerView: 2,
spaceBetween: 10,

breakpoints: {
975: {
slidesPerView: 3,
spaceBetween: 20,
}
},

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
});

мой HTML для слайдера, в котором в качестве элементов слайдера есть несколько карточек









Dịch vụ chăm sóc sức khỏe A
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae consectetur culpa quam nisi. Blanditiis sed officiis, corporis ullam maiores, magnam aperiam qui quasi amet eveniet quia quas cumque error dolore!

Xem chi tiết








Dịch vụ chăm sóc sức khỏe A
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo mollitia sapiente et dicta fuga quaerat accusantium, omnis eligendi dolorem fugit facere dolores recusandae ea quisquam vero voluptatem reprehenderit? Libero, natus.

Xem chi tiết








Dịch vụ chăm sóc sức khỏe A
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo mollitia sapiente et dicta fuga quaerat accusantium, omnis eligendi dolorem fugit facere dolores recusandae ea quisquam vero voluptatem reprehenderit? Libero, natus.

Xem chi tiết








Dịch vụ chăm sóc sức khỏe A
Dịch vụ này mang đến rất nhiều những tư vấn hữu ích cho sức khỏe của khách hàng....Hơn nữa Khách hàng còn được trải nghiệmrất nhiều những tiện ích khác nữa...

Xem chi tiết







Вот мой CSS для карточек и свайпа
.card{
margin: 0 .5em;
box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
border: none;
}

.card .img-wrapper {
max-width: 100%;
height: 13em;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

img{
max-height: 100%;
}

.carousel-custom{
max-width: 945px;;
}

.card-img-top{
object-fit: none;
}

.card-text {
display: -webkit-box;
-webkit-line-clamp: 3; /* Number of lines to display before cutting off text */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.swiper {
width: 100%;
height: fit-content;
padding: 0 10px 10px 0px;
}

.swiper-slide{
width: fit-content;
}

.history-swiper > .swiper-wrapper{
padding: 24px 0 24px 0;
}


Подробнее здесь: https://stackoverflow.com/questions/782 ... reakpoints