如何使用鼠标滚轮同步两个滑块？

Question

我在我的页面上使用 Swiper 滑块。在我的页面上，我有两个滑块。我想，当我使用向上滚动时 - 第一个滑块向上，第二个滑块向下。当我向下滚动时 - 第一个滑块向下，第二个滑块向上。

我写这个

https://288757.playcode.io https://playcode.io/288757?tabs=style.css&output 但是这段代码不好，因为在 mac 上工作很奇怪并且在 firefox 上不起作用，因为我不使用 mousewheel swiper 参数。

        $(window).bind('mousewheel', function(event){
            var width = $(document).width();

            if(width >= 769){
                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                    mySwiper1.slideNext(600);
                    mySwiper2.slidePrev(600);
                }
                else {
                    mySwiper1.slidePrev(600);
                    mySwiper2.slideNext(600);
                }
            }
        });

这是我的没有这段代码的滑块 https://jsfiddle.net/gpkd83nr/2/

如何使用鼠标滚轮同步两个滑块？谢谢！

Answer 1

你能试试这个吗？

window.onwheel=function(e){
            var val=e.deltaY;
        if(val>0){
         mySwiper1.slideNext(600);
         mySwiper2.slidePrev(600);
             }
        else{
           mySwiper1.slidePrev(600);
           mySwiper2.slideNext(600);
        }
    }

如何使用鼠标滚轮同步两个滑块？

How can I sync two sliders with mousewheel?

javascript

jquery

swiper