使轮播小部件不可鼠标拖动

Question

我在 elementor 中使用轮播小部件，其中一张幻灯片包含带有范围滑块的表单。

滑块可以拖动，但这样做时，整个轮播会随之滑动，从而产生意外的视差，导致无法正确使用滑块。

我尝试了以下代码：

jQuery(document).ready(function ($) {
    // Find the Swiper element inside the nested-carousel widget
    var swiperElement = $('.e-n-carousel.swiper')[0];

    if (swiperElement && swiperElement.swiper) {
        // Access the swiper instance and disable touch dragging
        swiperElement.swiper.allowTouchMove = false;
    }
});

代码在直接输入 js 控制台时有效，但在页脚或页眉内加载时无效。

我正在寻找使用上面的代码或任何其他方法的解决方案。

Answer 1

我实际上在发帖后几秒钟就发现了问题：

滑块启动的时间要晚得多，所以我只是添加了一个延迟：

jQuery(document).ready(function ($) {
    setTimeout(function () {
        // Find the Swiper element inside the nested-carousel widget
        var swiperElement = $('.e-n-carousel.swiper')[0];

        if (swiperElement && swiperElement.swiper) {
            // Access the swiper instance and disable touch dragging
            swiperElement.swiper.allowTouchMove = false;
        }
    }, 1000);
});