Menu
I updated my Angular Ionic 5 application and trying to migrate from ion-slides to Slides. I am following the official docs.
npm install swiper@6
scss file @import '~swiper/swiper';
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>
253
By default, Ionic Slides components use the built-in slide animation effects. But, you can also use the custom animations for your Slides components. It can be done by using the options property, which looks like below syntax. You can find the different slider parameter options from here.
You could use ion-slide-box , then you need to set slide-interval to 30000 to change image in 30 seconds, its default to 4 seconds. Show activity on this post.
Swiper Slider does not fire slideChange event when active slide changed automatically from last slide to first slide. Swiper Slider does not fire slideChange event when active slide changed by user to last slide In reverse direction.
Note that Swiper Angular component all events emits outside of NgZone for better perfomance. Dont forget to use `ngzone.run` or ChangeDetector if you need to change view (e.g slides) in event handlers (e.g `slideChange`). Swiper component supports all Swiper events, including additional swiper event that returns swiper instance as soon as possible.
Swiper Angular component uses "slots" for content distribution. There are 4 slots available container-start - element will be added to the beginning of swiper-container container-end (default) - element will be added to the end of swiper-container
After adding to AppModule, Please add SwiperModule to Page Level Module also where component is registered.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
