如何根据Elementor循环轮播中的活动幻灯片动态更改主体背景？

Question

身体：

我正在使用 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();
});

轮播工作正常，但我似乎无法获得正确的类或方法来正确定位中央幻灯片。

Answer 1

这可以通过修改当前代码来实现。

第 1 步： 替换代码的给定部分

        // Find the current active slide's image (swiper-slide-active)

        let activeSlideImage = $('.swiper-slide-next img').attr('src');

使用给定的代码。

        // Find the current active slide's image

        let activeSlideImage = $('.slick-current img').attr('src');

第 2 步： 替换代码的给定部分

    // 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

            }

        }

使用给定的代码。

    // Here we have initialize Slick Slider and update background every time slide changes.

    $('.your-carousel-class').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){

        updateBodyBackground(); // Update background at the end of every slide change

它应该可以帮助你。