How to change body background dynamically based on the active slide in Elementor loop carousel?

Body:

I’m using Elementor and I have a loop carousel element with multiple slides. I want to dynamically change the body background image to match the image of the central slide (the one currently in focus). The carousel is created with Elementor’s loop carousel widget.

This is the page: https://riccardocurin.com/new-homepage-02/

I tried using jQuery to detect the active slide and change the body background, but I’m not sure how to properly target the central slide and get its image URL. The carousel seems to use Slick Slider underneath.

I’m using the latest version of Elementor with a custom loop carousel.
Any suggestions on how to implement this properly? Thank you!

Here’s what I’ve tried so far:

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();
});

The carousel works fine, but I can’t seem to get the correct class or method to target the central slide properly.