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

Question

我想在 Angular 11 中使用 swiper JS slide 断点，因此不同的屏幕尺寸断点将有不同的总 slidesPerView，我已经从 Swiper JS 阅读了这份文档 https://swiperjs.com/angular并从 https://www.npmjs.com/package/swiper 安装 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, 
          }
   }
  } 
}

谢谢

Answer 1

###更新

我已经解决了这个问题

这是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() {
    }

}

希望对您有所帮助:)