tengo una plantilla de boostrap 5 que viene con un carrusel responsive, este muestra diferente número de elementos según el ancho de pantalla del dispositivo, ahora bien, yo necesito que este carrusel, funcione normalmente como lo hace en dispositivos móviles, pero cuando esté en pc, el carrusel deshabilite sus propiedades, y que los elementos puedan reaccionar como en un sistema grid.
Intenté con js, reconocer el ancho de pantalla para remover las clases que contengan owl-carousel mobile-carousel, para que de esta manera, el archivo no ejecute nada, pero no me funcionó
// mobile carousel (uses the Owl Carousel library)
$(".mobile-carousel").owlCarousel({
autoplay: false,
dots: true,
loop: true,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
900: {
items: 4
}
}
});
if (screen.width > 769)
$('#main').removeClass('owl-carousel mobile-carousel');
<main id="main">
<div class="owl-carousel mobile-carousel">
<div class="member">
<div class="pic"><img src="assets/img/p1.png" class="img-fluid" alt=""></div>
<div class="member-info">
<h4>Sarah Jhonson</h4>
<a href="#" class="btn btn-secondary">Reserva aquí</a>
</div>
</div>
<div class="member">
<div class="pic"><img src="https://www.bupa.cl/bupa/site/artic/20181024/imag/foto_0000001720181024111125.png" class="img-fluid" alt=""></div>
<div class="member-info">
<h4>Sarah Jhonson</h4>
<a href="#" class="btn btn-secondary">Reserva aquí</a>
</div>
</div>
<div class="member">
<div class="pic"><img src="assets/img/p3.png" class="img-fluid" alt=""></div>
<div class="member-info">
<h4>Sarah Jhonson</h4>
<a href="#" class="btn btn-secondary">Reserva aquí</a>
</div>
</div>
<div class="member">
<div class="pic"><img src="assets/img/p4.png" class="img-fluid" alt=""></div>
<div class="member-info">
<h4>Sarah Jhonson</h4>
<a href="#" class="btn btn-secondary">Reserva aquí</a>
</div>
</div>
<div class="member">
<div class="pic"><img src="assets/img/p4.png" class="img-fluid" alt=""></div>
<div class="member-info">
<h4>Sarah Jhonson</h4>
<a href="#" class="btn btn-secondary">Reserva aquí</a>
</div>
</div>
</div>
</main>
`