SlidesPerView Mobile

// Swiper start
  @ViewChild('swiperRef', { static: true })
  protected _swiperRef: ElementRef<SwiperContainer>;
  swiper?: Swiper;

  ngAfterViewInit(): void {
    this._initSwiper(this._swiperRef, 9, {
      320: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      640: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 3,
      },
      1024: {
        slidesPerView: 4,
      },
    });
  }

  private _initSwiper(ref: ElementRef<SwiperContainer>, slidesPerView: number, breakpoints?: SwiperOptions['breakpoints']): void {
    const options: SwiperOptions = {
      slidesPerView: slidesPerView,
      spaceBetween: 10,
      centeredSlides: false,
      loop: false,
      autoplay: false,
      navigation: {
        nextEl: '.icon-chevron-right',
        prevEl: '.icon-chevron-left',
      },
      breakpoints: breakpoints,
    };
    const swiperEl = ref.nativeElement;
    Object.assign(swiperEl, options);
    swiperEl.initialize();
  }
  // Swiper end