WordPress中JS模拟Royal Elementor高级轮播导航按钮失效求助

需求背景 #

我在WordPress的HTML小部件中插入JS，想要操控Royal Elementor Addon免费版提供的Advanced Carousel组件。由于自动播放功能仅在专业版中可用，我尝试通过JS触发轮播内导航按钮的点击事件来模拟自动播放，但点击似乎并未完全生效。

实现流程 #

• 页面完全加载后，先触发切换按钮点击以显示第一个隐藏元素；
• 该元素内包含带有导航按钮的Advanced Carousel；
• 初始点击完成后，代码应点击导航按钮以模拟自动播放功能。

现有代码 #

$(document).ready(function() {
    var fadeDuration = 1000;
    var initialClick = true;

    // Button click handler
    $('.toggle-button').on('click', function() {
        if (initialClick) {
            var $rightNavBar = $('.toggle-content:first').find('.wpr-slider-arrow-container').find('.wpr-slider-next-arrow');
            for (var i = 0; i < 4; i++) {
                $rightNavBar.click();
            }
            
            // Hide all elements and fade in the corresponding one
            $('.toggle-content').hide();
            var index = $('.toggle-button').index(this);
            $('.toggle-content').eq(index).fadeIn(fadeDuration);
            
            initialClick = false;
        } else {
            $('.toggle-content').hide();
            var index = $('.toggle-button').index(this);
            $('.toggle-content').eq(index).fadeIn(fadeDuration);
        }
    });

    // Trigger a click event on the first toggle button when the page is loaded
    $('.toggle-button:first').click();
});

环境信息 #

• WordPress 6.3.1
• Elementor 3.16.4
• Royal Elementor Addon 1.3.77

问题现象 #

• 页面完全加载后，初始触发点击成功显示了第一个隐藏元素；
• 但轮播无法正常工作；
• 导航按钮有时能被点击，大多数时候无法触发。

问题原因及修复方案 #

1. 轮播未初始化完成就触发点击
   隐藏元素中的轮播在未显示时，通常不会完成组件初始化，此时直接点击按钮自然无效。需要等待元素显示完成，甚至额外延迟确保轮播初始化完毕，再执行点击逻辑。

2. 循环点击无间隔导致轮播无响应
   原代码中连续快速点击4次，轮播来不及完成一次切换就接收下一个点击，会导致事件堆积或失效，需给每次点击添加间隔时间。

3. 原生事件触发更可靠
   部分组件的事件监听绑定在原生事件上，使用trigger('click')比直接调用click()更稳定。

修改后的代码：

$(document).ready(function() {
    var fadeDuration = 1000;
    var initialClick = true;

    // Button click handler
    $('.toggle-button').on('click', function() {
        var $this = $(this);
        $('.toggle-content').hide();
        var index = $('.toggle-button').index($this);
        var $targetContent = $('.toggle-content').eq(index);
        
        $targetContent.fadeIn(fadeDuration, function() {
            // 元素显示完成后再处理轮播逻辑
            if (initialClick) {
                // 延迟确保轮播组件初始化完成，时长可根据实际调整
                setTimeout(function() {
                    var $rightNavBar = $targetContent.find('.wpr-slider-arrow-container .wpr-slider-next-arrow');
                    var clickCount = 0;
                    // 给每次点击添加间隔，匹配轮播过渡时长
                    var clickInterval = setInterval(function() {
                        if (clickCount < 4) {
                            $rightNavBar.trigger('click');
                            clickCount++;
                        } else {
                            clearInterval(clickInterval);
                        }
                    }, 800); // 间隔时间可根据轮播过渡效果调整
                }, 500);
                initialClick = false;
            }
        });
    });

    // 页面加载完成后触发第一个切换按钮的点击
    $('.toggle-button:first').click();
});

另外，需检查浏览器开发者工具中轮播按钮的真实类名，确保wpr-slider-arrow-container和wpr-slider-next-arrow与实际DOM中的类名一致，避免选择器错误。

内容的提问来源于stack exchange，提问作者Che Yun