在 Angular 11 中使用 Swiper JS 创建响应式幻灯片

如何解决在 Angular 11 中使用 Swiper JS 创建响应式幻灯片

我想在 Angular 11 中使用 swiper JS 幻灯片断点，因此不同的屏幕尺寸断点将具有不同的总幻灯片 PerView，我已从 Swiper JS https://swiperjs.com/angular 阅读此文档并从 {{3} 安装 swiper js }

但是我不知道如何在组件ts文件中实现响应式断点。我已尝试在下面实现此代码，但 swiperConfig 不起作用。

这是HTML代码

 <swiper>
          <ng-template [swiperSlide]="swiperConfig"  *ngFor="let item of items">
            <div class="list-item">
                <app-item></app-item>
            </div>
          </ng-template>
 </swiper>

这是 TS 代码

import { Component,OnInit } from '@angular/core';
@Component({
  selector: 'app-swiper-test',templateUrl: './swiper-test.component.html',styleUrls: ['./swiper-test.component.scss']
})
export class SwiperTestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  
  public swiperConfig = {
    slidesPerView: 'auto',spaceBetween: 20,breakpoints:{
      992:{
           slidesPerView: 4,}
   }
  } 
}

谢谢

解决方法

### 更新

我已经解决了问题

这是html代码

<swiper [config]="swiperConfig">
    <ng-template swiperSlide *ngFor="let item of items">
        <div class="list-item">
            <app-item></app-item>
        </div>
    </ng-template>
</swiper>

这是TS代码

import { Component,OnInit } from '@angular/core';
import Swiper from 'swiper';

@Component({
  selector: 'app-swiper-test',templateUrl: './swiper-test.component.html',styleUrls: ['./swiper-test.component.scss']
})
export class SwiperTestComponent implements OnInit {
  
    swiperConfig: any = {
        slidesPerView: 'auto',spaceBetween: 20,breakpoints: {
            992: {
                spaceBetween: 20
            }
        }
    }

    constructor() {
    }

    ngOnInit() {
    }

}

希望对你有帮助:)