Elementor轮播组件禁止鼠标拖拽问题及代码失效求助

问题核心：你的代码在控制台执行有效，但页面加载时无效，是因为document.ready触发时机早于Elementor轮播组件（基于Swiper）的初始化完成时间，此时还无法获取到swiper实例。

下面提供两种可靠的解决方案：

方案一：利用Elementor前端初始化钩子（推荐） #

Elementor提供了专属的事件钩子，能精准在组件渲染完成后执行代码，避免时机问题。同时我们不直接禁用轮播触摸，而是仅在拖拽滑块时临时禁用，保证轮播其他场景正常使用：

jQuery(window).on('elementor/frontend/init', function() {
    // 监听轮播组件渲染完成
    elementorFrontend.hooks.addAction('frontend/element_ready/carousel.default', function($scope) {
        var swiper = $scope.find('.swiper')[0].swiper;
        if (!swiper) return;

        // 替换为你实际的范围滑块选择器（比如Elementor表单的滑块是.elementor-range-slider）
        var sliderSelector = '.elementor-range-slider';
        
        // 滑块按下/触摸开始时，禁用轮播触摸滑动
        $scope.find(sliderSelector).on('mousedown touchstart', function() {
            swiper.allowTouchMove = false;
        })
        // 滑块松开/离开时，恢复轮播触摸滑动
        .on('mouseup touchend mouseleave', function() {
            swiper.allowTouchMove = true;
        });
    });
});

注意：需要将sliderSelector的值替换为你页面中范围滑块的实际CSS选择器，可通过浏览器开发者工具查看元素类名获取。

方案二：延迟执行代码（备选） #

如果方案一无法生效，可通过延迟执行确保swiper实例已初始化，同样保留临时禁用的逻辑：

jQuery(document).ready(function($) {
    // 延迟1秒执行，可根据页面加载速度调整时长
    setTimeout(function() {
        var swiperElement = $('.e-n-carousel.swiper')[0];
        if (!swiperElement || !swiperElement.swiper) return;

        var swiper = swiperElement.swiper;
        var sliderSelector = '.elementor-range-slider';

        $(sliderSelector).on('mousedown touchstart', function() {
            swiper.allowTouchMove = false;
        }).on('mouseup touchend mouseleave', function() {
            swiper.allowTouchMove = true;
        });
    }, 1000);
});

为什么原来的代码无效？ #

document.ready仅等待DOM结构加载完成，但Elementor的动态组件（如轮播）是在DOM加载后通过JS动态渲染初始化的，所以此时swiperElement.swiper还未被创建，自然无法修改allowTouchMove属性；而你在控制台执行时，轮播已经完全初始化，所以代码能正常生效。

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