KRDS Angular

캐러셀 Carousel ​

캐러셀은 하나의 영역에서 여러 개의 콘텐츠를 순차적으로 번갈아 보여주는 컴포넌트이다. 한정된 공간에 여러 콘텐츠를 노출할 수 있으나 첫 번째 슬라이드 외에는 주목도가 크게 떨어지므로, 중요한 정보는 캐러셀에만 담지 않는 것이 좋다. 자동 재생 시에는 사용자가 즉시 정지할 수 있도록 재생/정지 버튼을 함께 노출한다.

KRDS 가이드

기본 (비주얼 배너형) ​

슬라이드는 <krds-carousel> 안에 <li krdsSlide>로 한 장씩 넣고, 캐러셀의 이름은 label(aria-label)로 줍니다. 현재 슬라이드가 아닌 슬라이드는 화면낭독기와 초점 이동에서 빠집니다(aria-hidden, inert). 현재 위치는 [(active)](0부터)로 주고받을 수 있고, moreHref를 주면 더 보기 링크가 붙습니다. 모션 최소화 설정을 켠 사용자에게는 이동 효과를 없앱니다.

ts
import { Component } from '@angular/core'
import { KrdsCarousel, KrdsSlide } from '@krds.ui/angular'

@Component({
  selector: 'demo-carousel-basic',
  imports: [KrdsCarousel, KrdsSlide],
  template: `
    <div style="background-color: #d8e4f2">
      <krds-carousel variant="visual" label="주요 서비스 안내" moreHref="#">
        @for (index of slides; track index) {
          <li krdsSlide>
            <div class="in">
              <div class="text">
                <p class="tit">타이틀 영역 {{ index }}</p>
                <p class="txt">컨텐츠 영역 컨텐츠 영역 {{ index }}</p>
                <a href="#" class="krds-btn primary">버튼 영역</a>
              </div>
              <div class="im">
                <svg
                  width="243"
                  height="178"
                  viewBox="0 0 243 178"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  role="img"
                  aria-label="예시"
                >
                  <rect width="243" height="178" fill="#E6E8EA" />
                </svg>
              </div>
            </div>
          </li>
        }
      </krds-carousel>
    </div>
  `
})
export default class CarouselBasic {
  readonly slides = [1, 2, 3, 4]
}

배너형 ​

배너형(variant="banner")은 인디케이터 안에 분수형 페이지네이션과 이전/다음·더 보기 버튼을 배치합니다.

ts
import { Component } from '@angular/core'
import { KrdsCarousel, KrdsSlide } from '@krds.ui/angular'

@Component({
  selector: 'demo-carousel-banner',
  imports: [KrdsCarousel, KrdsSlide],
  template: `
    <krds-carousel variant="banner" label="배너형 캐러셀 예제" moreHref="#">
      @for (index of slides; track index) {
        <li krdsSlide>
          <div class="in">
            <div class="text">
              <p class="cate">서브타이틀 {{ index }}</p>
              <p class="tit">타이틀 {{ index }}</p>
            </div>
            <div class="im">
              <svg
                width="243"
                height="178"
                viewBox="0 0 243 178"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="예시"
              >
                <rect width="243" height="178" fill="#E6E8EA" />
              </svg>
            </div>
          </div>
        </li>
      }
    </krds-carousel>
  `
})
export default class CarouselBanner {
  readonly slides = [1, 2, 3]
}

자동 재생 ​

autoplay를 주면 autoplayDelay(ms) 간격으로 넘어갑니다. 자동 재생 중에는 정지 버튼이 노출되며, 정지하면 재생 버튼으로 바뀝니다. 마우스 오버나 키보드 포커스가 캐러셀 안에 있는 동안에는 자동 재생이 멈춥니다. 재생·정지 버튼을 누르면 (play)·(stop)이 발생합니다.

ts
import { Component } from '@angular/core'
import { KrdsCarousel, KrdsSlide } from '@krds.ui/angular'

@Component({
  selector: 'demo-carousel-autoplay',
  imports: [KrdsCarousel, KrdsSlide],
  template: `
    <krds-carousel variant="banner" label="자동 재생 캐러셀 예제" autoplay [autoplayDelay]="3000" moreHref="#">
      @for (index of slides; track index) {
        <li krdsSlide>
          <div class="in">
            <div class="text">
              <p class="cate">서브타이틀 {{ index }}</p>
              <p class="tit">타이틀 {{ index }}</p>
            </div>
            <div class="im">
              <svg
                width="243"
                height="178"
                viewBox="0 0 243 178"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="예시"
              >
                <rect width="243" height="178" fill="#E6E8EA" />
              </svg>
            </div>
          </div>
        </li>
      }
    </krds-carousel>
  `
})
export default class CarouselAutoplay {
  readonly slides = [1, 2, 3]
}

순환 없음 ​

[loop]="false"로 순환을 끄면 처음과 마지막 슬라이드에서 이전/다음 버튼이 비활성화됩니다.

ts
import { Component } from '@angular/core'
import { KrdsCarousel, KrdsSlide } from '@krds.ui/angular'

@Component({
  selector: 'demo-carousel-no-loop',
  imports: [KrdsCarousel, KrdsSlide],
  template: `
    <div style="background-color: #d8e4f2">
      <krds-carousel variant="visual" label="순환 없는 캐러셀 예제" [loop]="false">
        @for (index of slides; track index) {
          <li krdsSlide>
            <div class="in">
              <div class="text">
                <p class="tit">타이틀 영역 {{ index }}</p>
                <p class="txt">컨텐츠 영역 컨텐츠 영역 {{ index }}</p>
                <a href="#" class="krds-btn primary">버튼 영역</a>
              </div>
              <div class="im">
                <svg
                  width="243"
                  height="178"
                  viewBox="0 0 243 178"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  role="img"
                  aria-label="예시"
                >
                  <rect width="243" height="178" fill="#E6E8EA" />
                </svg>
              </div>
            </div>
          </li>
        }
      </krds-carousel>
    </div>
  `
})
export default class CarouselNoLoop {
  readonly slides = [1, 2, 3, 4]
}

분수형 페이지네이션 ​

페이지네이션 방식은 형태와 무관하게 pagination(bullets·fraction·none)으로 바꿀 수 있습니다. 기본은 비주얼 배너형이 bullets, 배너형이 fraction입니다.

ts
import { Component } from '@angular/core'
import { KrdsCarousel, KrdsSlide } from '@krds.ui/angular'

@Component({
  selector: 'demo-carousel-fraction',
  imports: [KrdsCarousel, KrdsSlide],
  template: `
    <div style="background-color: #d8e4f2">
      <krds-carousel variant="visual" label="분수형 페이지네이션 캐러셀 예제" pagination="fraction">
        @for (index of slides; track index) {
          <li krdsSlide>
            <div class="in">
              <div class="text">
                <p class="tit">타이틀 영역 {{ index }}</p>
                <p class="txt">컨텐츠 영역 컨텐츠 영역 {{ index }}</p>
                <a href="#" class="krds-btn primary">버튼 영역</a>
              </div>
              <div class="im">
                <svg
                  width="243"
                  height="178"
                  viewBox="0 0 243 178"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  role="img"
                  aria-label="예시"
                >
                  <rect width="243" height="178" fill="#E6E8EA" />
                </svg>
              </div>
            </div>
          </li>
        }
      </krds-carousel>
    </div>
  `
})
export default class CarouselFraction {
  readonly slides = [1, 2, 3, 4]
}

KrdsCarousel ​

선택자 krds-carousel

Inputs

이름타입기본값설명
variant'visual' | 'banner''visual'형태
[(active)]number0현재 슬라이드 위치 (0부터)
loopbooleantrue처음·끝에서 이어서 순환
autoplaybooleanfalse자동 재생 (재생·멈춤 버튼 표시)
autoplayDelaynumber2500자동 재생 간격 (ms)
pauseOnHoverbooleantrue마우스를 올리면 자동 재생을 멈춤
speednumber400이동 시간 (ms)
spaceBetweennumber-슬라이드 간격 (px, 기본: 비주얼 0, 배너 16)
pagination'bullets' | 'fraction' | 'none'-페이지네이션 (기본: 비주얼 bullets, 배너 fraction)
navigationbooleantrue이전/다음 버튼
moreHrefstring-더 보기 링크 주소
labelstring'캐러셀'캐러셀 이름 (aria-label)
prevLabelstring'이전'
nextLabelstring'다음'
playLabelstring'슬라이드 재생'
stopLabelstring'슬라이드 멈춤'
moreLabelstring'더 보기'

Outputs

이름값설명
playvoid자동 재생을 시작했을 때
stopvoid자동 재생을 멈췄을 때

Methods

이름시그니처설명
indexOf(slide: KrdsSlide): number슬라이드의 위치 (없으면 -1)

KrdsSlide ​

선택자 li[krdsSlide]

Inputs

없음