fullpage.js使用*ngFor动态添加幻灯片

import 'fullpage.js';
import 'fullpage.js/dist/fullpage.css';

<div id="fullpage">
  <div class="section">Slide 1</div>
  <div class="section">Slide 2</div>
  <div class="section">Slide 3</div>
  <!-- 其他幻灯片 -->
</div>

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

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    new fullpage('#fullpage', {
      // fullpage.js的配置选项
    });
  }
}

export class SliderComponent {
  slides = [
    { title: 'Slide 1', content: 'Content 1' },
    { title: 'Slide 2', content: 'Content 2' },
    { title: 'Slide 3', content: 'Content 3' },
    // 其他幻灯片数据
  ];
}

<div id="fullpage">
  <div class="section" *ngFor="let slide of slides">
    <h2>{{ slide.title }}</h2>
    <p>{{ slide.content }}</p>
  </div>
</div>