alex-steinberg commented 4 years ago

Bug Report

Ionic version:

[x] 5.0.0

Current behavior:

In order to get one slider to control another, I pass the instance of the slider to be controlled to the controlling slider according to the Swiper API docs. This has no effect.

Expected behavior:

The controlled slider should change as the controlling slider is changed.

Steps to reproduce:

See the example project in the Github repo I created: https://github.com/alex-steinberg/ion-slides-no-controller

Related code:

sliderOpts: any = {
    controller: {
      control: <swiper instance>
    }
  }

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.4.1 (/Users/<my-user>/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.1
   @angular-devkit/schematics    : 9.0.7
   @angular/cli                  : 9.0.7
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res (update available: 0.12.1) : 0.11.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   NodeJS : v12.16.1 (/Users/<my-user>/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

Sebiworld commented 4 years ago

If I understand it right, the Controller module is not even integrated in Ionic's version of the Swiper Slider: https://github.com/ionic-team/ionic-framework/blob/bfddb170659224d0f826762744dfe44a85813d36/core/src/components/slides/swiper/swiper.js#L3

So, without importing the Controller-Module it cannot work. I have a similar problem with the Virtual-Module for virtual scrolling. Is there any chance to add them to the Swiper-Slides-Build?

With all modules but the Animation-Effects imported, the mentioned swiper.js-file would look like this:

import { Autoplay, Pagination, Scrollbar, Swiper, Keyboard, Zoom, Virtual, Mousewheel, Navigation, Lazy, Controller, A11y, History, HashNavigation, Thumbs } from 'swiper/js/swiper.esm';

Swiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom, Virtual, Mousewheel, Navigation, Lazy, Controller, A11y, History, HashNavigation, Thumbs]);
export { Swiper };

See the SwiperJs documentation for custom builds here: https://swiperjs.com/api/#custom-build

wiegell commented 3 years ago

+1 mousewheel not working

jonathon-m commented 3 years ago

Would be great to see the Virtual module included here too!

1beb commented 3 years ago

<ion-slides :options={mousewheel: true}">

Appears to be totally ignored.

InvalidReferenceException commented 3 years ago

The Mousewheel module is not installed :/

liamdebeasi commented 2 years ago

Thanks for the issue! With the release of Ionic 6, we made the decision to deprecate ion-slides in favor of using Swiper.js directly.

Moving forward, ion-slides will only receive critical security fixes, and the component will be removed in Ionic 7. As a result, I am going to close this issue.

We have prepared migration guides for each of the 3 JavaScript frameworks we support, so developers can get started migrating right away.

Migration for Angular Migration for React Migration for Vue

We believe this change will lead to a healthier Ionic ecosystem as it frees up resources for the Ionic team to dedicate to other areas of this project while still giving developers options for carousels in their apps. Since ion-slides currently uses Swiper under the hood, the behavior of your carousels should remain the same even after you migrate.

For more information on the reasoning for and benefits of this change, please see the ion-slides documentation.

Thank you!

ionitron-bot[bot] commented 2 years ago

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.

ionic-team / ionic-framework

bug: Swiper Controller module doesn't work on IonSlides #21079

Bug Report