Mi carrusel de búhos tiene datos de puntos, y solo quiero que tenga datos de puntos de 0px a 1024px, y a partir de 1025px no habrá más datos de puntos, solo un punto, así que escribo así, y solo funciona con un owl-nav, y sobre un owl-dots, tengo que volver a cargar la página para que funcione. Por favor, ayúdenme, agradecería todas las respuestas, gracias.
$(window).on('load', function() { const next_icon = '<img src="./images/next-icon.svg">'; const prev_icon = '<img src="./images/prev-icon.svg">'; $('.owl-carousel').owlCarousel({ loop: true, margin: 30, items: 1, dots: true, responsiveClass: true, navText: [ prev_icon, next_icon ], responsive: { 0: { dotData: true, dotsData: true, nav: false, }, 1025: { dotData: false, dotsData: false, nav: true, } } });})
En primer lugar, no existe una opción como dotData . Solo dotsData , si hablamos de la versión owl-carousel-2. Y responsiveClass también. Acerca de dotsData en Owl docs (aquí: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html ) puede ver que dotsData en la Lista de respuesta solo en la carga , por lo que funciona correctamente, solo si la página se vuelve a cargar . Entonces, debe crear otra solución con jQuery. Por ejemplo:
jQuery(window).resize(function() { if (window.innerWidth > 1024) { jQuery('.your-dot-item-class').removeAttr('data-dot'); } else { jQuery('.your-dot-item-class').attr('data-dot', '<p>Some content</p>'); } });