Ionic Angular - ion-slides migrate to swiper.js

[eevan7a9]

I have received a warning for using ion-slides saying ion-slide is depricated and will be removed in ionic v7. and is suggest to use swipper.js instead.

Now I followed this swiper.js tutorial on how to integrate swiper with Ionic-angular project.

Installed swiper

npm install swiper@6

added styles

@import '~swiper/swiper';
@import '~@ionic/angular/css/ionic-swiper';

app Module

import { SwiperModule } from 'swiper/angular';

@NgModule({
  declarations: [AppComponent],
  ...
  imports: [
    ...
    SwiperModule
  ],
  ...
})

gallery.component.html

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>

gallery.component.ts

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

SwiperCore.use([IonicSwiper]);

Error:

NG0304: 'swiper' is not a known element
NG0304: 'swiper-slide' is not a known element

I have tried importing the SwiperComponent

import { SwiperComponent } from 'swiper/angular';

  declarations: [
    ...
    SwiperComponent
  ],

importing the SwiperComponent, then I get an Error

Error: Type SwiperComponent is part of the declarations of 2 modules

[vltansky]

Can you try:

    <swiper>
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
    </swiper>

https://swiperjs.com/angular#usage