На десктопі аул-карусель вимикається, на планшеті та мобільному працює:
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; }