Tengo un problema con un carrusel de búhos (v2.3.4) que no sé cómo solucionar. En los dispositivos, parece cambiar el tamaño del carrusel de forma aleatoria y las imágenes desaparecen. A veces puedo ver que el carrusel se ha cargado correctamente, pero luego cambia repentinamente, también parece cambiar cuando interactúo con otro carrusel de búhos que he cargado. He intentado agregar un contenedor separado para controlar el ancho, usando una o dos llamadas para cargar los dos carruseles, retrasando la inicialización, etc.
Es el segundo carrusel de búhos en el bloque verde que tiene los problemas anteriores. Puedes ver la página de desarrollo aquí: http://37.128.128.31/~thecropbrighton/
Como solo quiero que este control deslizante esté en dispositivos, actualmente estoy usando el siguiente Javascript:
$(function() {
if ($(window).width() < 768) {
startCarousel();
} else {
$('.mob-carousel').addClass('off');
}
$(window).on('resize', function() {
if ($(window).width() < 768) {
startCarousel();
} else {
stopCarousel();
}
});
function startCarousel() {
$('.mob-carousel').owlCarousel({
loop: true,
margin: 0,
nav: false,
dots: false,
items: 1,
mouseDrag: true,
touchDrag: true,
navText: ["<img src="" + get_template_directory_uri + "/assets/images/right.svg">", "<img src="" + get_template_directory_uri + "/assets/images/swipe-left.svg">"],
});
}
function stopCarousel() {
var owl = $('.mob-carousel');
owl.trigger('destroy.owl.carousel');
owl.addClass('off');
}
.