9

I updated my Angular Ionic 5 application and trying to migrate from ion-slides to Slides. I am following the official docs.

  • I installed swiper npm install swiper@6
  • Did import in the scss file @import '~swiper/swiper';
  • Did import the SwiperModule in app.module.ts and my page.module.ts
import { SwiperModule } from 'swiper/angular';
@NgModule({
  imports: [SwiperModule],
})
export class AppModule {}

The HTML page is able to recognize swiper after I imported the SwiperModule in my page.module.ts but it's not able to recognize swiper-slide and showing error 'swiper-slide' is not a known element

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>
Tapas Mukherjee
  • 2,088
  • 1
  • 27
  • 66
  • use it this way in HTML: ` Slide 1 Slide 2 Slide 3 ` – Najam Us Saqib Sep 15 '21 at 07:10
  • @NajamUsSaqib, with this code the error is gone and the slides are visible but it's not at all working like `ion-slides`. All the slide contents are coming vertically in the same view. There is no styling applied. I have tried changing the config option of the slider but it's the same. As per the ionic document I have imported `@import '~swiper/swiper';` in the scss class. – Tapas Mukherjee Sep 15 '21 at 10:48
  • check swiper documentation and Ignore ionic docs: https://swiperjs.com/angular – Najam Us Saqib Sep 15 '21 at 12:02
  • @NajamUsSaqib, thank you for your inputs. I got it working with swiper documentation. I would keep this open as it should work with the Ionic components – Tapas Mukherjee Sep 16 '21 at 15:36

3 Answers3

2

After adding to AppModule, Please add SwiperModule to Page Level Module also where component is registered.

Shivinder Singh
  • 143
  • 1
  • 7
0

In my case. Open component.module.ts, Adding by following:

@NgModule({
  declarations: [
    **ComponentName**
  ],
  imports: [
    CommonModule,
    **SwiperModule,**
    RouterModule.forChild([
      {
          path: '',
          component: **ComponentName**,
          children: [],
      },
    ]),
  ]
})

Good luck!

Hai Dinh
  • 1,499
  • 2
  • 17
  • 30
-1

On the ionic documentation:

<ion-content>
  <swiper>
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>
</ion-content>
Mo D Genesis
  • 5,187
  • 1
  • 21
  • 32