With Ionic Framework v7 the ion-slides component was finally removed, and we need to find a new way to add slides to our Ionic application.

In this Quick Win we will integrate Swiper directly into our Ionic Angular application and see why it’s mostly the same and still super helpful.

Since the update to Swiper v9 the implementation slightly changed compared to the previous v8 Swiper with Ionic as Swiper is now a web component and not a specific Angular package anymore.

Nonetheless we will be able to implement the behavior just like ion-slides used to work in our Ionic application!

Installing Swiper v9 with Ionic

To get started, bring up a new Ionic application and simply install the latest version of Swiper:

In order to register the web component from Swiper we need to call a register function once when our app starts, so bring up the src/app/app.component.ts and insert:

We are loading the full bundle here, but you could also pick only the required modules you need instead if you want to decrease the import size.

To use a web component we now need to import the CUSTOM_ELEMENTS_SCHEMA into the module of the page where we want to add Swiper.

For our blank app, we can do this inside the src/app/home/home.module.ts:

That’s all you need to add Swiper to your Ionic app!

Basic Swiper Slides

You can now get started by simply adding the container and then how many slides you want in your src/app/home/home.page.html:

Without any styling, it will work as a swiper but only for the height of the text. To make Swiper take up the whole space of your page, simply add the following to your src/app/home/home.page.scss:

This is now the most basic replacement of ion-slides and should cover most of your general needs already.

Swiper Options and Events

If you want more control, you can customize Swiper in many ways. To begin with, let’s add a pagination to the bottom and make the slides loop infinite by setting the parameters on our component.

Additionally, we want to listen to the event when a slide changes, and we can integrate that as well:

Now we just need to add an according function to our page, and we should see some logs whenever we slide:

You can check out all parameters and events in the Swiper documentation as well.

Using Swiper Methods with Typescript

Sometimes you also need to control your Swiper element from code, and I couldn’t find an example of the right usage with Typescript.

But it’s possible, and quite easy.

Let’s add a few buttons to our page and give our Swiper container an Angular template reference. On top of that we will run some code after the component is initiated by using the afterinit event:

In that event, we use the view child and extract the Swiper element into its own variable, which is using the right Swiper type from the package.

With that in place, we can now use it to access all methods directly from code, like navigating to the next or previous slide:

You can also check out all events in the documentation!

Custom Swiper Styling

If you want to make it yours, you can inject some styling where CSS variables are used inside the Swiper component. For example, this could would change the bullets at the bottom when using pagination:

Besides that, you can also directly style most of the general elements like the background without using CSS variables.

Ionic Image Zoom with Swiper

To zoom into images we always used ion-slides, and we can easily add zoom functionality to images again with Swiper.

To achieve this, let’s first add an array of images to our page:

Now all you have to do is wrap your slide content in a div with the swiper-zoom-container class and enabling zoom on your Swiper component:

You can also define the zoom more granular, but for started this allows us to easily zoom images with Ionic and Swiper!

On top of the shown features, there’s more to explore like different effects or modules. All of that should work nicely in your app, so check out the swiper docs, and don’t be sad about the remove ion-slides anymore!