Angular Swiper CSS is not working 앵귤러 스와이퍼 CSS 먹통 문제 해결 방안 예시

 <!-- swiper -->
    <swiper-container #swiperContainer class="z-10 w-5/6 mx-auto index5" init="false">
      <swiper-slide
        class="swiper-slide animation-item"
        *ngFor="let phone of phones"
      >
        <div class="overflow-hidden">
          <img
            src="https://picsum.photos/400/300"
            class="rounded-md w-96 h-44 sm:w-[30rem] sm:h-52 md:w-80 md:h-64"
          />
        </div>
      </swiper-slide>
    </swiper-container>

0. #swiperContainer 선언

1. init="false" 설정 필수! 이 설정을 하지 않으면 임의로 CSS를 그려버려서 CSS 설정 및 값 오버라이딩 등 먹통됩니다.

 

@ViewChild('swiperContainer') swiperEl!: ElementRef<SwiperContainer>;

ngAfterViewInit(): void {
    this.setSwiper();
  }

 setSwiper() {
    const options: SwiperOptions = {
      speed: 3000,
      autoplay: {
        delay: 5000,
      },
      allowTouchMove: false,
      touchRatio: 0,
      loop: true,
      slidesPerView:
        document.documentElement.clientWidth >= 1440
          ? 4
          : document.documentElement.clientWidth >= 640
          ? 2
          : 1,
      spaceBetween: 20,
      direction: 'horizontal',
    };

    Object.assign(this.swiperEl.nativeElement, options);
    this.swiperEl.nativeElement.initialize();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.setSwiper();
  }

2. swiperEl.initialize() : 템플릿에서 init false 설정을 했으므로 수동으로 init 해야합니다.