Integrating Swiper.js with Ionic-Angular: A 2026 Update

A quick update guide

Re-Introduction

Three years ago I wrote a guide for integrating Swiper.js (v11+) into Ionic 6+/Angular 14+ projects. Since then, Angular went through six major versions, Ionic went through two, and Swiper went through three. Along the way, Angular’s whole component model changed shape too.

This article is a quick refresher: what actually changed in each library and how I brought a 3-year-old Swiper/Ionic/Angular project back to life without a rewrite from scratch.

What changed in the last 3 years

Angular (16 → 22)

• Standalone components are now the default. NgModules are optional, not required. No more app.module.ts/*-routing.module.ts boilerplate for a simple project.
• New template control-flow syntax: @if/@for/@switch replace *ngIf/*ngFor/*ngSwitch.
• Apps bootstrap with bootstrapApplication() instead of bootstrapModule().
• The build system moved from Webpack to an esbuild/Vite-based application builder, giving faster builds and a different angular.json shape.

Ionic (7 → 9)

• @ionic/angular's package root now is the standalone entry point, so components like IonHeader and IonContent import straight from @ionic/angular with no separate subpath needed.
• IonicModule.forRoot() is replaced by provideIonicAngular() in your bootstrap providers.

Swiper (11 → 14)

• The core integration API didn’t change at all. swiper/element/bundle and register() still work exactly the same way, which made this the easy part.
• The only real change is where you call register(): in a standalone app it now belongs in main.ts, before bootstrapApplication(), instead of inside a component file.

How I updated it (in order)

For a small project (2–3 components), I skipped the incremental ng update chain (16→17→18…→22) and went straight to target versions. That was faster and lower-risk than running 6 sequential migrations on a project this size:

1. Bumped every dependency in package.json directly to its current major (Angular 22, Ionic 9, Swiper 14, TypeScript 6) and reinstalled.
2. Switched angular.json's build target from the browser builder to the new esbuild-based application builder.
3. Deleted the NgModules and converted both components to standalone: bootstrapApplication() + provideRouter() + provideIonicAngular() in main.ts, lazy-loaded routes via loadComponent() instead of loadChildren().
4. Swapped *ngFor for @for in templates.
5. Refreshed a stale .browserslistrc that was still pinned to 2019-era browser versions since it was silently breaking the modern build output.

How To Integrate Swiper 14+ into Ionic 9+/Angular 22+ (standalone)

1. Install the latest Swiper:

$ npm i swiper@latest

2. Add CUSTOM_ELEMENTS_SCHEMA directly to the @Component decorator of the standalone component using Swiper. This used to go on the NgModule; now it goes on the component itself:

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HomePage {}

3. Import and call register() once in main.ts, before bootstrapping the app:

import { register } from 'swiper/element/bundle';

register();

bootstrapApplication(AppComponent, { providers: [...] });

4. Add the Swiper element to your template, using the new @for syntax:

<swiper-container navigation="true" pagination="true">
  @for (image of images; track image) {
    <swiper-slide>
      <img [src]="image" alt="">
    </swiper-slide>
  }
</swiper-container>

Summary

The good news: Swiper’s own integration surface barely moved in 3 years. Almost everything that changed came from Angular’s shift to standalone components and Ionic following suit. If you’re sitting on an old Ionic/Angular/Swiper project, the migration is smaller than it looks. Most of the work is deleting NgModule boilerplate, not rewriting logic.

Final Thoughts

Ever since Ionic deprecated its ion-slides component, I’ve relied on Swiper to render my slides and carousels, and after how easy this update was, I can safely say it’s still just as reliable. Since Swiper is a plain web component and not an Angular library, it doesn’t care what Angular version you’re on, unlike an Angular-specific carousel wrapper that could break on every major bump. That’s what makes it a bulletproof choice for carousels and sliders in Angular and Ionic.

Get afrotonder’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Hope this helps the wandering dev and if you reached this far, thanks for reading!

All Links

• Original 2023 post⚡
• Updated project on GitHub 👨🏾‍💻
• Swiper Element page 📚
• Ionic Angular standalone docs 🔴