На десктопі аул-карусель вимикається, на планшеті та мобільному працює:
function gridCarousel() {
if ($(window).width() < 776) {
$('.owl-carousel').owlCarousel();
$('.owl-carousel').removeClass('grid-carousel');
}else{
$('.owl-carousel').owlCarousel('destroy');
$('.owl-carousel').addClass('grid-carousel');
}
}
$(document).ready(function(e) {
gridCarousel();
});
$(window).resize(function() {
gridCarousel();
});
І трошки стилів:
.owl-carousel.grid-carousel{
display: grid;
grid-template-columns: repeat(5,1fr);
grid-gap: 20px;
}
.owl-carousel .item {
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 10px;
}