Bidirectional mousewheel sliders in Angular using Swiper

Question

I'm trying to build two sliders which will scroll horizontally (in opposite direction) when mousewheel event is triggered.

As you can see here, it is quite easy using the Swiper API with following configs:

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

It works like a charm as you can see here: https://jsfiddle.net/sx0mc9po/

I use the mousewheel option eventsTarget: 'body' so that, the scroll event will be triggered anywhere on the page.

In Angular I use the ngx-swiper-wrapper as directive and the Swiper works fine:

<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>

The config is the same as mentioned above. But Angular completely ignores the option

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

My mouse pointer has to hover the swiper-container otherwise it will not scroll any container. Since there are two swiper-container it only scrolls one.

I'm not sure if this is a bug or Angular isn't allowing to put a listener on body from this component. If so is there any workaround or am I missing something?

score 0 · Answer 1 · answered Sep 07 '22 at 18:16

Based on their documentation, install the Swiper Mousewheel module in your controller:

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

More information: https://swiperjs.com/angular

Bidirectional mousewheel sliders in Angular using Swiper

1 Answers1