如何使用ngx useful (swiper.js)通过ngFor将标题放入图片中

npm install ngx-useful-swiper --save
npm install swiper --save

import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';

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

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

@Component({
  selector: 'app-swiper',
  template: `
    <ngx-useful-swiper [config]="swiperConfig">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let item of items">
          <img [src]="item.image" alt="">
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </ngx-useful-swiper>
  `,
  styleUrls: ['./swiper.component.css']
})
export class SwiperComponent {
  items = [
    { title: '标题 1', image: 'path/to/image1.jpg' },
    { title: '标题 2', image: 'path/to/image2.jpg' },
    { title: '标题 3', image: 'path/to/image3.jpg' }
    // 更多图片和标题...
  ];

  swiperConfig = {
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: true,
    pagination: { clickable: true }
  };
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

<app-swiper></app-swiper>