la propiedad responsive no parece tener efecto. En la versión de escritorio funciona bien, pero en el dispositivo móvil aún muestra la misma cantidad de elementos que en el escritorio.
$('.owl-carousel').owlCarousel({ loop:true, margin:5, nav:false, responsiveClass:true, autoplay:true, autoplayTimeout:2500, responsive:{ 0:{ items:1, }, 600:{ items:2 }, 1000:{ items:4 } } })Por si acaso, tal vez no incluyeste la metaetiqueta receptiva:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Parece estar funcionando bien con el código que agregó, ¿tal vez algún CSS que está sobrescribiendo esto de alguna manera?
$('.owl-carousel').owlCarousel({ loop:true, margin:5, nav:false, responsiveClass:true, autoplay:true, autoplayTimeout:2500, responsive:{ 0:{ items:1, }, 600:{ items:2 }, 1000:{ items:4 } } }); .owl-carousel { margin: 2rem 0; } .owl-carousel .item { height: 10rem; background: #4DC7A0; padding: 1rem; } .owl-carousel .item h4 { color: #FFF; font-weight: 400; margin-top: 0rem; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="owl-carousel owl-theme"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div>Estas son dos formas que encontré:
1: debe establecer la escala mínima y la escala máxima de la metaetiqueta de la ventana gráfica:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">2- Agregue la siguiente opción a js:
responsiveBaseElement: 'body'