Create responsive slide using Swiper JS in Angular 11

user_15707124 0
Viewed 2867

I'd like to use swiper JS slide breakpoint in Angular 11 so different screen size breakpoints will have different total slidesPerView, I've read this documentation from Swiper JS https://swiperjs.com/angular and install swiper js from https://www.npmjs.com/package/swiper

but I don't know how to implement responsive breakpoint in the component ts file. I've tried to implement this code below but the swiperConfig is not working.

Here is the HTML code

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

Here is the TS Code

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, 
          }
   }
  } 
}

Thank you

swiper.js angular typescript
1 Answers

### Update

I've solved the problem

Here is the html code

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

Here is the TS code

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

}

Hope it's helpful :)

user_157071240
Related