Создайте адаптивный слайд с помощью Swiper JS в Angular 11

Я хотел бы использовать точку останова для слайдов swiper JS в Angular 11, чтобы точки останова для разных размеров экрана имели разные общие слайды. PerView, я читал эту документацию из Swiper JS https://swiperjs.com/angular и установите swiper js со страницы https://www.npmjs.com/package/swiper

но я не знаю, как реализовать отзывчивую точку останова в файле компонента 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, 
          }
   }
  } 
}

Спасибо


typescript angular swiper swiperjs
person kuranim    schedule 23.04.2021    source источник
comment
Всегда приятно поделиться найденным ответом (но на самом деле вы можете опубликовать ответ на свои вопросы). Заботиться ... .   -  person qqtf    schedule 11.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

### Обновить

Я решил проблему

Вот 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() {
    }

}

Надеюсь, это поможет :)

person kuranim    schedule 24.06.2021