Как динамически изменить фон тела на основе активного слайда в карусели цикла Elementor? ⇐ Jquery

[Anonymous]

Тело:
Я использую Elementor и у меня есть элемент циклической карусели с несколькими слайдами. Я хочу динамически изменить фоновое изображение тела, чтобы оно соответствовало изображению центрального слайда (того, который сейчас находится в фокусе). Карусель создается с помощью виджета циклической карусели Elementor.
Это страница: https://riccardocurin.com/new-homepage-02/
Я пытался использовать jQuery для обнаружения активного слайда и изменения фона текста, но не уверен, как правильно настроить таргетинг на центральный слайд и получить URL-адрес его изображения. Кажется, что в карусели используется Slick Slider.
Я использую последнюю версию Elementor с настраиваемой циклической каруселью.
Есть какие-нибудь предложения о том, как правильно это реализовать? Спасибо!
Вот что я уже пробовал:

Код: Выделить всё

jQuery(document).ready(function($) {
function updateBodyBackground() {
// Find the current active slide's image (swiper-slide-active)
let activeSlideImage = $('.swiper-slide-next img').attr('src');

if (activeSlideImage) {
// Change the body's background to the active slide's image
$('body').css({
'background-image': 'url(' + activeSlideImage + ')',
'background-size': 'cover',
'background-position': 'center',
'background-repeat': 'no-repeat'
});
}
}

// Initialize Swiper and update background every time slide changes
const swiper = new Swiper('.swiper-container', {
loop: true, // Enable loop
on: {
slideChangeTransitionEnd: function() {
updateBodyBackground(); // Update background at the end of every slide change
}
}
});

// Initial background setting when the page loads
updateBodyBackground();
});

Карусель работает нормально, но мне не удается подобрать правильный класс или метод для правильного нацеливания на центральный слайд.

Подробнее здесь: https://stackoverflow.com/questions/789 ... -elementor