What is the procedure for incorporating swiper 9 in angular?

edit

Here are the steps to incorporate Swiper 9 in Angular:

1. Install Swiper 9 package using npm

npm install swiper@9.4.1

1. Import Swiper module in your Angular module

import { NgModule } from '@angular/core';
import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [SwiperModule],
})
export class AppModule {}

1. Use Swiper in your component

<!-- HTML -->
<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>

// TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-slider',
  template: `
    <swiper>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  `,
})
export class SliderComponent {}

1. Customize Swiper parameters in your component

<!-- HTML -->
<swiper [slidesPerView]="3" [spaceBetween]="50">
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>

// TypeScript
import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';

@Component({
  selector: 'app-slider',
  template: `
    <swiper [slidesPerView]="slidesPerView" [spaceBetween]="spaceBetween">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  `,
})
export class SliderComponent {
  slidesPerView = 3;
  spaceBetween = 50;
  SwiperOptions: SwiperOptions = {
    // Swiper options here
  };
}

That's it. You can now use Swiper 9 in your Angular project.