Двунаправленные ползунки с колесом мыши в Angular с использованием Swiper

Question

Я пытаюсь создать два ползунка, которые будут прокручиваться по горизонтали (в противоположном направлении) при запуске события колесика мыши.

Как видите, использовать 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', {
    freeMode: true,
    slidesPerView: 4,
    preloadImages: true,
    lazy: true,
    loop: true,
    mousewheel: {
        invert: false,  
        eventsTarget: 'body'
    },
});

Это работает как шарм, как вы можете видеть здесь: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'
},

Мой указатель мыши должен навести на swiper-контейнер, иначе он не будет прокручивать какой-либо контейнер. Поскольку есть два swiper-контейнера, он прокручивает только один.

Я не уверен, что это ошибка, или Angular не позволяет включить слушателя bodyиз этого компонента. Если да, то есть ли обходной путь или я что-то упускаю?

Answer 1

Основываясь на их документации, установите модуль Swiper Mousewheel в свой контроллер:

      import { Component } from '@angular/core';

// import Swiper core and required modules
import SwiperCore, { Mousewheel, Navigation, Pagination, Scrollbar, A11y } from 'swiper';

// install Swiper modules
SwiperCore.use([Mousewheel, Navigation, Pagination, Scrollbar, A11y]);

Дополнительная информация: https://swiperjs.com/angular.