Swiper Slider：滚动条/鼠标滚轮控制 2 个滑块实例时出现问题

Question

I have a mysterious problem with my development.

I have inserted 2 sliders which work perfectly.

My first swiper slider have a scrollbar and mousewheel activated. And the other NO scrollbar and NO mousewheel. I am using "data" attributes to get parameters from the HTML.

This is my problem: when I use mousewheel on the first slider, it works, and the scrollbar move too. But when I move/drag the second slider, the scrollbar of the first slider move too. And the mousewheel event is active on the second slider which is very strange because the parameter is false.

Here is my code

<!-- Slider 1 -->
<div class="swiper swiper-slider" data-slides-per-view="[2.5,2,1]" data-slides-spacing="[120,30,10]" data-mousewheel="true" data-sensitivity="1" data-freemode="true">
<div class="swiper-wrapper">
  <div class="swiper-slide">
    <div class="card card-post">
    <div class="card-img">
    <img width="500" height="800" src="image.jpg" alt="" class="img-fluid">
    </div>
    <div class="card-body">
    <p class="card-title">Title of post</p>
    </div>
    </div>
  </div>
</div>
</div>

<!-- Slider 2 -->
<div class="swiper swiper-slider" data-slides-per-view="[3,2,1]" data-slides-spacing="[50,30,10]" data-mousewheel="" data-sensitivity="" data-freemode="">
<div class="swiper-wrapper">
  <div class="swiper-slide">
    <div class="card card-post">
    <div class="card-img">
    <img width="500" height="800" src="image.jpg" alt="" class="img-fluid">
    </div>
    <div class="card-body">
    <p class="card-title">Title of post</p>
    </div>
    </div>
  </div>
</div>
</div>


<script>
jQuery( window ).on( 'elementor/frontend/init', () => {
    elementorFrontend.hooks.addAction('frontend/element_ready/swiper-slider-widget.default', function ($scope, $) {
        
            var slider = $('.swiper-slider');
            if(slider.length){    
            var dataSlidesPerView = slider.data("slides-per-view");
            var dataSlidesSpacing = slider.data("slides-spacing");
            var dataMouseWheel = slider.data("mousewheel");
            var dataSensitivity = slider.data("sensitivity");
            var dataFreemode = slider.data("freemode");
     
            var swiperSlider = new Swiper(".swiper-slider", {
                freeMode: {
                enabled: dataFreemode,
                sticky: false,
                momentumBounce: false,
                },
                mousewheel: {
                enabled: dataMouseWheel,
                sensitivity: dataSensitivity,
                },
                touchEventsTarget: 'container',
                navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
                },
                scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
                dragSize: 100,
                },
                breakpoints: {
                0: {
                    slidesPerView: dataSlidesPerView[2],
                    spaceBetween: dataSlidesSpacing[2],
                    centeredSlides: false,
                },
                768: {
                    slidesPerView: dataSlidesPerView[1],
                    spaceBetween: dataSlidesSpacing[1],
                    centeredSlides: false,
                },
                1280: {
                    slidesPerView: dataSlidesPerView[0],
                    spaceBetween:  dataSlidesSpacing[0],
                    centeredSlides: false,
                    }  
                }
            });

        }

    } );
});

</script>

Answer 1

EDIT: i added scrollbar option in your html and i changed your js, now it should be working

jQuery( window ).on( 'elementor/frontend/init', () => {
    elementorFrontend.hooks.addAction('frontend/element_ready/swiper-slider-widget.default', function ($scope, $) {
        var slider = $('.swiper-slider');
        if(slider.length){
            var dataSlidesPerView = slider.data("slides-per-view");
            var dataSlidesSpacing = slider.data("slides-spacing");
            var dataMouseWheel = slider.data("mousewheel");
            dataMouseWheel = dataMouseWheel === 'true' || dataMouseWheel === true;
            var dataSensitivity = slider.data("sensitivity");
            var dataFreemode = slider.data("freemode");
            dataFreemode = dataFreemode === 'true' || dataFreemode === true;
            var dataScrollbar = slider.data("scrollbar");
            dataScrollbar = dataScrollbar === 'true' || dataScrollbar === true;
     
            const swiperParams = {
                freeMode: {
                enabled: dataFreemode,
                sticky: false,
                    momentumBounce: false,
                },
                mousewheel: {
                    enabled: dataMouseWheel,
                    sensitivity: dataSensitivity,
                },
                touchEventsTarget: 'container',
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                scrollbar: {
                    enabled: dataScrollbar,
                    el: '.swiper-scrollbar',
                    draggable: true,
                    dragSize: 100,
                },
                breakpoints: {
                    0: {
                        slidesPerView: dataSlidesPerView[2],
                        spaceBetween: dataSlidesSpacing[2],
                        centeredSlides: false,
                    },
                    768: {
                       slidesPerView: dataSlidesPerView[1],
                        spaceBetween: dataSlidesSpacing[1],
                        centeredSlides: false,
                    },
                    1280: {
                        slidesPerView: dataSlidesPerView[0],
                        spaceBetween:  dataSlidesSpacing[0],
                        centeredSlides: false,
                    }
                }
            };

            var swiperSlider = new Swiper(".swiper-slider", swiperParams);
        }
    });
});

if this is not working, you should create one swiper at time in this manner:

new Swiper("#swiperWithScrollbar", swiperWithScrollbarParams);
new Swiper("#swiperWithoutScrollbar", swiperWithoutScrollbarParams);

editing params in order to get only what you need, in my case i'm creating each swiper individually with a jquery().each() and using html attributes as are you doing and it's working with different swipers made in different ways (PS: i'm assigning an id via jquery, if this does not exists so i have to manage the attributes only, code below)

let newSelector = element.attr('id');
if(!newSelector) {
  newSelector = 'cmbSwiper' + index;
  element.attr('id', newSelector);
}