Swiper in Angular

app/core/helpers/utils.ts

import { ElementRef } from '@angular/core';
import Swiper from 'swiper';
import { SwiperContainer } from 'swiper/element';
import { SwiperOptions } from 'swiper/types';

export function initSwiper(swiperElement: ElementRef<SwiperContainer>, options: SwiperOptions): Swiper | undefined {
  if (swiperElement) {
    const swiperElem = swiperElement.nativeElement;
    Object.assign(swiperElem, options);
    swiperElem.initialize();

    return swiperElem.swiper;
  }
  return undefined;
}

app/app-component.ts

public constructor(@Inject(PLATFORM_ID) private readonly _platformId: InjectionToken<object>) {
    if (isPlatformBrowser(this._platformId)) {
      register();
    }
}

swiper-component.ts

import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  QueryList,
  ViewChildren
} from '@angular/core';
import { initSwiper } from '@app/core';

@Component({
  selector: 'app-swiper',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './swiper.component.html',
  styleUrls: ['./swiper.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SwiperComponent implements AfterViewInit {
  @ViewChildren('swiperContainer') public swiperContainers: QueryList<ElementRef>;

  public ngAfterViewInit(): void {
    this.swiperContainers.forEach((swiperContainer: ElementRef) => {
      initSwiper(swiperContainer, {
        slidesPerView: 1
      });
    });
  }
}

<div class="swiper">
  <swiper-container #swiperContainer>
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
    <swiper-slide>4</swiper-slide>
    <swiper-slide>5</swiper-slide>
    <swiper-slide>6</swiper-slide>
  </swiper-container>
</div>

.swiper {
  max-width: 360px;
}