[Angular]swiper와 ngFor 같이 사용하기

npm install swiper --save

• 모듈 추가

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

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

• html 코드

<swiper [config]="swiperConfig">
  <ng-container *ngFor="let slide of slides">
    <div class="swiper-slide">
      <!-- Your slide content here using the data from 'slide' -->
      {{ slide.title }}
    </div>
  </ng-container>
</swiper>

• ts 코드

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  slides = [
    { title: 'Slide 1' },
    { title: 'Slide 2' },
    { title: 'Slide 3' },
    // Add more slides here as needed
  ];

  swiperConfig = {
    // Your Swiper configuration options here
    // For example, you can set direction, pagination, etc.
  };
}