Angulr Swiper 배경 이미지 슬라이드 활용 예시 / 슬라이드 터치 막기, 시간, 반복, 상세 설정

@import "swiper/css";

0. global.scss 에 로드

 

 

 

 

<!-- 배경화면 슬라이더 -->
<div class="w-full h-full absolute z-0 pointer-events-none"> <!-- 배경화면이므로 z-index 0설정 -->
    <swiper-container class="swiper" style="width: 100%; height: 100%">
      <swiper-slide>
        <img class="w-full h-full pointer-events-none" src="assets/background/background_1.png" />
      </swiper-slide>
      <swiper-slide
        ><img class="w-full h-full pointer-events-none" src="assets/background/background_2.png"
      /></swiper-slide>
      <swiper-slide
        ><img class="w-full h-full pointer-events-none" src="assets/background/background_3.png"
      /></swiper-slide>
    </swiper-container>
  </div>
  
 
 <!-- 슬라이더 현재 진행 상황 bar -->
 <div class="absolute bottom-0 w-full flex">
      <div
        class="bg-primary z-10 h-px"
        [ngStyle]="{'width': timeLeft +'%'}"
      ></div>
      <div class="bg-white absolute z-0 w-full h-px"></div>
    </div>

1. 템플릿 : 스와이퍼 전용 태그 사용

슬라이더 진행상황 bar

 

 

import {
  CUSTOM_ELEMENTS_SCHEMA,
  ChangeDetectorRef,
  Component,
  HostListener,
  OnInit,
  ViewChild,
  signal,
} from '@angular/core';
import { register } from 'swiper/element/bundle';
import Swiper from 'swiper';

register();

@Component({
  selector: 'app-section1',
  templateUrl: './section1.section.html',
  styleUrls: ['./section1.section.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 
  standalone: true,
  imports: [CommonModule],
})


swiper!: Swiper; // 스와이퍼 객체 선언


ngOnInit() { 
	// 스와이퍼 객체 값 설정
    this.swiper = new Swiper('.swiper', {
      autoplay: {
        delay: 5000, // 5초 마다 스와이프
      },
      allowTouchMove: false, // 마우스 드래그 터치 막기
      loop: true, // 반복 설정
      on: { // 상세 옵션
        autoplayTimeLeft: (swiper, timeLeft, percentage) => {
          this.timeLeft = (1 - percentage) * 100;
        },
      },
    });
  }
  
 // 스와이퍼 일시정지 및 다시재생
 toggleAutoplay() {
    this.swiper.autoplay.running
      ? this.swiper.autoplay.pause()
      : this.swiper.autoplay.resume();
  }

2. 스와이퍼 활용은 위한 컴포넌트 설정 예시

3. timeLeft 변수를 100분율로 만들어 현재 진행 상황을 템플릿에 전달

4. 템플릿에서 timeLeft 변수를 받아 width 값을 % 로 설정하여 현재 진행 상황을 볼 수 있습니다.