feat(slides): Swiper 5

[dylanvdmerwe]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
On a non-mobile device (with mouse), there is no way to enable horizontal scrolling (css mode) of the trackpad to move between slides. You always have to click and drag to change pages.

Expected behavior:
On non-mobile devices, you should be able to change pages of the swiper component with your mouse or keyboard.

Steps to reproduce:
Setting these slide options has no effect:

    slidesPerView: 5,
    spaceBetween: 12,
    loop: false,
    cssMode: true,
    autoplay: {
      delay: 5000,
    },
    mousewheel: true,
    keyboard: true,

Related code:
Please see:
https://swiperjs.com/demos/145-css-mode.html
https://github.com/nolimits4web/Swiper/blob/master/demos/145-css-mode.html

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.5 (C:\Users\dylan\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.1
   @angular-devkit/build-angular : 0.803.10
   @angular-devkit/schematics    : 8.3.10
   @angular/cli                  : 8.3.10
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.5.2
   native-run  : 0.2.7

System:

   NodeJS : v12.8.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.11.2
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. We do not use Swiper 5 in Ionic yet, so this is probably why cssMode doesn't work. I'll consider this a feature request to update to Swiper 5.

[danieljameswilliams]

Hi,

I would also like this cssMode. To use scroll-snap functionality for better overflow-scrolling on slides.

[samyakjain]

Has this been fixed? I am also looking for same functionality. I want to swipe using trackpad or keyboard on laptop.

[liamdebeasi]

I am going to close this issue in favor of #20033. (same request for Swiper 5, just consolidating the 2 requests)

[liamdebeasi]

Also please feel free to try the Swiper 5 dev build I have posted in #20033 (comment) and provide feedback in the linked thread. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.