Migrating from ion-slides to Swiper.js
ion-slides
?ion-slides
was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from ion-slides
to Swiper Element.
Getting Started
First, update to the latest version of Ionic:
npm install @ionic/angular@latest
Once that is done, install the Swiper dependency in your project:
npm install swiper@latest
Next, we need to add the CUSTOM_ELEMENTS_SCHEMA
, which tells Angular that we will be using custom elements. This can be done in either app.module.ts
, or the module file for the component where you will be using Swiper.
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
});
...
Finally, we need to call Swiper's register
function to globally register Swiper's custom elements. This should only be done once, so place it in app.component.ts
.
import { register } from 'swiper/element/bundle';
register();
@Component({
...
})
...
From there, we just have to replace ion-slides
elements with swiper-container
and ion-slide
elements with swiper-slide
. Note that these custom elements do not need to be imported, as calling register
tells Angular about them on its own.
<swiper-container>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper-container>
Bundled vs. Core Versions
By default, make sure you import the register
function from swiper/element/bundle
. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version.