How to Use Swiper Element with Angular 17?

Using Swiper with Angular enhances user experience by providing touch-enabled sliders and carousels that are responsive and easy to navigate on mobile devices. It allows developers to create interactive and visually appealing UI components, enhancing the overall look and feel of the applications.

In this article, we will learn how can implement Swiper Element in our project.

Prerequisites

• Node >= 18.13.0
• Angular Cli v17

What are Swiper Elements?

Swiper is a modern, free, and open-source library that provides a flexible way to create touch-enabled, responsive sliders and carousels for websites and web applications. It offers features such as smooth transitions, support for various touch gestures, and customizable layouts for creating engaging user experiences on mobile devices.

Let us create a new angular 17 application and use swiper elements in it.

Approach

• Create Angular Application: We will create a new application using Angular CLI.
• Install Swiper Package: Then install the Swiper packages, a library provided by the Swiper Team.
• Register Custom Elements: Next, register the Swiper custom elements to ensure they are available in the Angular application.
• Integration with Angular Application: With Swiper installed and registered, we can start using Swiper elements.

Steps to Implement Swiper Element

Step 1: Create an angular application

We can make use of the angular cli to create a new application.

ng new swiper-elements

This command will create a new app in the directory swiper-elements, we then use cd command to change our active directory.

Step 2: Installing the swiper package

There is a library made by the Swiper team available at npm

npm install swiper

Folder Structure

Dependencies

dependencies":
 {  
  "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.7",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "swiper": "^11.1.3",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3" 
 }

Step 3: Registering the custom element

We need to register the swiper elements, so that the custom elements are registered before the application tries to use them. We can do that by updating our main.ts file. This will make sure all the swiper elements that the application will try to use are available.

Example: To demonstrate using the swiper element in the Angular 17.

<!-- app.component.html -->

<div class="container">
    <h1>Swiper Elements</h1>
    <swiper-container>
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
    </swiper-container>
</div>

/* app.component.scss */

.container {
    max-width: 800px;
    margin: 32px auto;

    h1 {
        text-align: center;

    }

    swiper-slide {
        text-align: center;
        font-size: 24px;
        border-radius: 24px;
        padding: 16px 0;
        height: 400px;


        &:nth-of-type(1) {
            background-color: #780000;
            color: white
        }

        &:nth-of-type(2) {
            background-color: #fdf0d5;
        }

        &:nth-of-type(3) {
            background-color: #003049;
            color: white;
        }

        &:nth-of-type(4) {
            background-color: #669bbc;
        }
    }
}

// app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
    title = 'swiper-elements';
}

// main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { register as registerSwiperElements } from 'swiper/element/bundle';
import { AppComponent } from './app/app.component';

registerSwiperElements();
bootstrapApplication(AppComponent, appConfig).catch((err) =>
    console.error(err)
);

We just need to add CUSTOM_ELEMENTS_SCHEMA in the schemas array, since swiper is not an element known by angular template

Output