Jquery - Make carousel widget not mouse draggable

Screenload
October 28, 2024
141 views
0 votes
2 Answers

I am using a carousel widget in elementor. One of the slides contains a form with a range slider.

The slider can be dragged, but when doing so the whole carousel is sliding along with it, creating an unintended parallax which makes it impossible to use the slider properly.

I tried the following code:

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

The code works when entered directly into the js console, but not when loaded inside the footer nor header.

I am looking for a solution using that code above or any other method.

Answers

Chosen as BEST ANSWER

I actually found the problem a few seconds after posting:

The slider is initiated much later, so I just added a delay:

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