Swiper 幻灯片未显示在 ionic 5.7 中

Question

I have created Ionic-Angular PWA.I have updated the ionic version to 5.7.0. As per this new updation I am trying to replace the ion-slides with swiper-slide as the ion-slides has been deprecated.

swiper : 6.8.4
ionic : 5.7.0
angular : 12.0.2

In my code

app.module.ts

import { SwiperModule } from 'swiper/angular';
@NgModule({
   imports: [SwiperModule],
 })

component.ts

import SwiperCore, { Navigation, Pagination } from 'swiper';
import { IonicSwiper } from '@ionic/angular';

SwiperCore.use([IonicSwiper, Navigation, Pagination]);
export class GenesisPage implements OnInit {
  slideOpts = {
    initialSlide: 0,
    speed: 400,
    loop: true,
    autoplay: {
    disableOnInteraction: false
   },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet(index, className) {
      const newClass = `${className} myCustomPager`;
      return `<span class="${newClass}"></span>`;
    }
}

};

component.html

<swiper [pagination]="slideOpts.pagination" [initialSlide]="slideOpts.initialSlide"
                [speed]="slideOpts.speed" [loop]="slideOpts.loop" [autoplay]="slideOpts.autoplay">
                <swiper-slide>
                    <div class="image-wrapper">
                        <img loading="lazy" *ngIf="!webp" width="640" height="360"
                            src="assets/images/genesis/launch-slide-1-new.png" class="first" alt="launch slide"
                            useImg />
                        <img loading="lazy" *ngIf="webp" width="640" height="360"
                            src="assets/images/genesis/launch-slide-1-new.webp" class="first" alt="launch slide"
                            useImg />
                    </div>
                    <div class="slide-content-wrap">
                        <h2>DISCOVER</h2>
                        <p>& EXPLORE</p>
                    </div>
                </swiper-slide>
            </swiper>

I am getting the error as below

Can anyone please help me out for this. Thanks in advance.

Answer 1

I was facing the same issue. Try importing the 'SwiperModule' in the module file of your Ionic page instead of the main 'app.module.ts'

// page-name.module.ts

import { SwiperModule } from 'swiper/angular';
@NgModule({
   imports: [SwiperModule],
 })

Answer 2

Ive found swiper-slide not to work so I am using the following as per Swiperjs.com

<swiper
  [pagination]="{type: 'fraction'}"
  [navigation]="true"
  class="mySwiper">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>