refactor(swiper): update to Swiper 9

angular/package.json

@@ -23,9 +23,9 @@
     "@capacitor/core": "3.2.5",
     "@capacitor/haptics": "1.1.2",
     "@capacitor/keyboard": "1.1.2",
-    "@ionic/angular": "^6.1.1",
+    "@ionic/angular": "^6.6.2",
     "rxjs": "~6.6.0",
-    "swiper": "^7.1.0",
+    "swiper": "^9.1.1",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },

angular/src/app/app.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { register } from 'swiper/element/bundle';
+
+register();
 
 @Component({
   selector: 'app-root',

angular/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
@@ -13,5 +13,6 @@ import { AppRoutingModule } from './app-routing.module';
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}

angular/src/app/home/home.module.ts

@@ -5,15 +5,13 @@ import { FormsModule } from '@angular/forms';
 import { HomePage } from './home.page';
 
 import { HomePageRoutingModule } from './home-routing.module';
-import { SwiperModule } from 'swiper/angular';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    HomePageRoutingModule,
-    SwiperModule
+    HomePageRoutingModule
   ],
   declarations: [HomePage]
 })

angular/src/app/home/home.page.html

@@ -13,19 +13,21 @@
     </ion-toolbar>
   </ion-header>
 
-  <swiper
+  <swiper-container
+    #swiper
+
     [keyboard]="true"
     [pagination]="true"
     [scrollbar]="true"
+    [modules]="swiperModules"
 
-    (slideChangeTransitionStart)="slideWillChange()"
-    (slideChangeTransitionEnd)="slideDidChange()"
-    (swiper)="swiperInit($event)"
+    (slidechangetransitionstart)="slideWillChange()"
+    (slidechangetransitionend)="slideDidChange()"
   >
-    <ng-template swiperSlide>Slide 1</ng-template>
-    <ng-template swiperSlide>Slide 2</ng-template>
-    <ng-template swiperSlide>Slide 3</ng-template>
-    <ng-template swiperSlide>Slide 4</ng-template>
-    <ng-template swiperSlide>Slide 5</ng-template>
-  </swiper>
+    <swiper-slide>Slide 1</swiper-slide>
+    <swiper-slide>Slide 2</swiper-slide>
+    <swiper-slide>Slide 3</swiper-slide>
+    <swiper-slide>Slide 4</swiper-slide>
+    <swiper-slide>Slide 5</swiper-slide>
+  </swiper-container>
 </ion-content>

angular/src/app/home/home.page.scss

@@ -1,7 +1,7 @@
-.swiper {
+swiper-container {
   height: 300px;
 
-  --bullet-background: rgb(var(--ion-color-primary-rgb), 0.5);
-  --bullet-background-active: var(--ion-color-primary);
-  --scroll-bar-background: var(--ion-color-light);
+  --swiper-pagination-bullet-inactive-color: rgb(var(--ion-color-primary-rgb), 0.5);
+  --swiper-pagination-color: var(--ion-color-primary);
+  --swiper-scrollbar-bg-color: var(--ion-color-light);
 }

angular/src/app/home/home.page.ts

@@ -1,22 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { IonicSlides } from '@ionic/angular';
 
-import SwiperCore, { Keyboard, Pagination, Scrollbar } from 'swiper';
-
-SwiperCore.use([Keyboard, Pagination, Scrollbar, IonicSlides]);
-
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
 export class HomePage {
-  private slidesRef: any;
-
-  constructor() {}
-
-  public swiperInit(swiper: any) {
-    this.slidesRef = swiper;
+  private swiperInstance: any;
+  public swiperModules = [IonicSlides];
+
+  @ViewChild('swiper')
+  set swiper(swiperRef: ElementRef) {
+    /**
+     * This setTimeout waits for Ionic's async initialization to complete.
+     * Otherwise, an outdated swiper reference will be used.
+     */
+    setTimeout(() => {
+      this.swiperInstance = swiperRef.nativeElement.swiper;
+    }, 0);
   }
 
   public slideWillChange() {
@@ -26,11 +28,11 @@ export class HomePage {
   public slideDidChange() {
     console.log('Slide did change');
 
-    if (!this.slidesRef) return;
+    if (!this.swiperInstance) return;
 
     console.table({
-      isBeginning: this.slidesRef.isBeginning,
-      isEnd: this.slidesRef.isEnd
+      isBeginning: this.swiperInstance.isBeginning,
+      isEnd: this.swiperInstance.isEnd
     });
   }
 

angular/src/global.scss

@@ -25,8 +25,34 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
-@import '~swiper/scss';
-@import '~swiper/scss/keyboard';
-@import '~swiper/scss/pagination';
-@import '~swiper/scss/scrollbar';
-@import '~@ionic/angular/css/ionic-swiper';
+swiper-container {
+  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-color: var(--ion-color-primary, #3880ff);
+  --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+  --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+}
+
+swiper-slide {
+  display: flex;
+  position: relative;
+
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  font-size: 18px;
+
+  text-align: center;
+  box-sizing: border-box;
+}
+
+swiper-slide img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}