Swiper Cards

<swiper-container #swiper1>
  @for (item of data.running; track item) {
    <swiper-slide>
      <app-ad-card [data]="item" />
    </swiper-slide>
  }
</swiper-container>

swiper-container {
  display: grid;
}

import { CommonModule, isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  Inject,
  inject,
  OnDestroy,
  OnInit,
  PLATFORM_ID,
  ViewChild,
} from '@angular/core';
import { DeviceService, HeaderNavService } from '@app/core/services';
import { AdCardComponent } from '@app/lib/components/ad-card/ad-card.component';
import { BarType } from '@app/lib/components/progress-bar-2/progress-bar-2.enum';
import { StatType } from '@app/lib/components/stats/stats.enum';
import { StatusType } from '@app/lib/shared/enums/status.enum';
import { EmptyAdsComponent } from '@app/shared/components/empty-ads/empty-ads.component';
import { TranslocoPipe } from '@jsverse/transloco';
import { Subject, takeUntil } from 'rxjs';
import { SwiperContainer } from 'swiper/swiper-element';

import { MockOverview } from '../../mock/overview.mock';
import { Overview } from '../../models/overview.model';

@Component({
  selector: 'app-overview',
  standalone: true,
  imports: [CommonModule, EmptyAdsComponent, TranslocoPipe, AdCardComponent],
  templateUrl: './overview.component.html',
  styleUrl: './overview.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OverviewComponent implements OnInit, AfterViewInit, OnDestroy {
  private readonly _headerNavService = inject(HeaderNavService);
  private readonly _cdr = inject(ChangeDetectorRef);
  private readonly _deviceService = inject(DeviceService);
  private readonly _destroy$ = new Subject();

  @ViewChild('swiper1') private readonly _swiper1Ref!: ElementRef<SwiperContainer>;
  @ViewChild('swiper2') private readonly _swiper2Ref!: ElementRef<SwiperContainer>;
  @ViewChild('swiper3') private readonly _swiper3Ref!: ElementRef<SwiperContainer>;

  isBrowser: boolean = false;
  isMobile: boolean = true;
  title: string;
  data: Overview = MockOverview;

  StatusType = StatusType;
  StatType = StatType;
  BarType = BarType;

  constructor(@Inject(PLATFORM_ID) private readonly _platformId: object) {
    this.isBrowser = isPlatformBrowser(this._platformId);
  }

  public get classes(): string[] {
    const deviceType = this.isMobile ? 'mobile' : 'desktop';
    return [deviceType];
  }

  public ngOnInit(): void {
    this._deviceService.isMobileObs$.pipe(takeUntil(this._destroy$)).subscribe((isMobile) => {
      this.isMobile = isMobile;
      this._cdr.markForCheck();
    });
    this._headerNavService.isVisible = true;
    this._headerNavService.isInfoCardVisible = false;
    this._headerNavService.isSingleButton = true;
    this._headerNavService.btnPrimaryLabel = 'SHARED.NEW_AD';
    this._headerNavService.isBtnPrimaryLabelVisible = true;
    this._headerNavService.buttonPrimaryMobilIcon = 'icon-plus';
    this._headerNavService.isSubpage = false;
    this._headerNavService.isButtonsVisible = true;
  }

  public ngAfterViewInit(): void {
    if (this.isBrowser) {
      this._initSwiper1(this._swiper1Ref);
      this._initSwiper1(this._swiper2Ref);
      this._initSwiper1(this._swiper3Ref);
    }
  }

  ngOnDestroy(): void {
    this._destroy$.next(null);
    this._destroy$.complete();
  }

  private _initSwiper1(swiperElement: ElementRef<SwiperContainer>): void {
    const options = {
      slidesPerView: 3,
      breakpoints: {
        0: {
          slidesPerView: 1,
        },
        470: {
          slidesPerView: 1.5,
        },
        599: {
          slidesPerView: 1,
        },
        780: {
          slidesPerView: 1.5,
        },
        930: {
          slidesPerView: 2,
        },
        1100: {
          slidesPerView: 2.5,
        },
        1250: {
          slidesPerView: 3,
        },
      },
      spaceBetween: 24,
    };
    const swiperElem = swiperElement.nativeElement;
    Object.assign(swiperElem, options);
    swiperElem.initialize();
  }
}