Why Swiper is not being initialised on ionic modal?

I am trying to use Swiper Angular, on an Ionic Modal but the swiper is not being initialized. When the application runs it doesn’t show any errors in the console but when the code is inspected I get this:

<swiper _ngcontent-kch-c220="">
  <!--container-->
  <!--container-->
  <!--container-->
</swiper>

This is how I implemented the swiper:

<swiper
  #swiper
  [slidesPerView]="3"
  [spaceBetween]="50"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange()">
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

Component’s Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SetupConfirmComponent } from '@shared/components/setup-confirm/setup-confirm.component';
import { IonicModule } from '@ionic/angular';
import { SwiperModule } from 'swiper/angular';

@NgModule({
  declarations: [SetupConfirmComponent],
  imports: [CommonModule, IonicModule, SwiperModule],
  exports: [SetupConfirmComponent],
})
export class SetupConfirmModule {}

Also, the CSS is imported into the main CSS file and is currently working as swiper works in other components perfectly.

1 post - 1 participant

Read full topic