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

【问题标题】：Create responsive slide using Swiper JS in Angular 11在 Angular 11 中使用 Swiper JS 创建响应式幻灯片
【发布时间】：2021-04-23 08:02:24
【问题描述】：

我想在 Angular 11 中使用 swiper JS 幻灯片断点，因此不同的屏幕尺寸断点将具有不同的总 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, 
          }
   }
  } 
}

谢谢

【问题讨论】：

分享找到的答案总是很高兴（但您实际上可以针对自己的问题发布答案）。保重... .

标签： angular typescript swiper swiperjs

【解决方案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() {
    }

}

希望对你有帮助:)

【讨论】：