I am encountering a problem with an Owl Carousel (v2.3.4) that is causing the carousel to randomly resize and the images to disappear on certain devices. The issue seems to occur when interacting with another Owl Carousel I have loaded on the page. Despite trying various solutions such as adding a separate wrapper for width control, using different initialization methods, and delaying the initialization process, the problem persists.
The problematic Owl Carousel can be found in the Green block on the development page:
Since I only want this slider to appear on specific devices, I am currently utilizing the following 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');
}