agent-app/src/lib/comp-swiper/comp-swiper.component.ts

import { Component, AfterViewInit, Input } from '@angular/core';
// import Swiper JS
import Swiper from 'swiper';

interface SwiperSlide{
  title?:string
  img?:string
  innerHTML?:string
}

@Component({
  selector: 'comp-swiper',
  templateUrl: './comp-swiper.component.html',
  styleUrls: ['./comp-swiper.component.scss'],
  standalone: true,
})
export class CompSwiperComponent  implements AfterViewInit {

  @Input() list:SwiperSlide[] = []
  /**
   * 轮播图参数
   * @see https://swiperjs.com/swiper-api
   */
  @Input() options:any

  @Input() height:string = "150px";
  @Input() width:string = "100%";
  constructor() { }

  ngAfterViewInit() {

    let defaultOptions:any = {
      loop:true,
      // // If we need pagination
      // pagination: {
      //   el: '.swiper-pagination',
      // },

      // // Navigation arrows
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
    }

    if(this.options){
      Object.keys(this.options).forEach(key=>[
        defaultOptions[key] = this.options[key]
      ])
    }
    const swiper = new Swiper(".swiper",defaultOptions);
  }

}