使用Swiper的Angular中的双向鼠标滚轮滑块

问题描述

我正在尝试构建两个滑块，当鼠标滚轮事件被触发时，它们将水平滚动（以相反的方向）。

如您在这里看到的，使用带有以下配置的Swiper API相当容易：

var swiper = new Swiper('.row-top',{
    freeMode: true,slidesPerView: 4,preloadImages: true,lazy: true,loop: true,mousewheel: {
        invert: true,eventsTarget: 'body'
    },});
var swiper = new Swiper('.row-bottom',mousewheel: {
        invert: false,});

在这里您可以看到它的魅力： https://jsfiddle.net/sx0mc9po/

我使用鼠标滚轮选项eventsTarget: 'body'，以便滚动事件将在页面上的任何位置触发。

在Angular中，我使用ngx-swiper-wrapper作为指令，并且Swiper可以正常工作：

<div class="swiper-controller">
    <div  class="swiper-container row-top" [swiper]="configTop">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
        </div>
    </div>

    <div  class="swiper-container row-bottom" [swiper]="configBottom">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
        </div>
    </div>
</div>

配置与上述相同。但是Angular完全忽略了该选项

mousewheel: {
    ... 
    eventsTarget: 'body'
},

我的鼠标指针必须悬停在滑行容器上，否则它将不会滚动任何容器。由于有两个滑动器容器，因此只滚动一个。

我不确定这是Bug还是Angular不允许在此组件的body上放置侦听器。如果可以的话，有什么解决方法吗？或者我缺少什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular javascript swiper