Skip to main content

Carousel

MSK Carousel은 슬라이드를 가로로 전환하는 경량 primitive입니다. 이전/다음 버튼, 인디케이터 점, 키보드 화살표를 지원합니다.

Preview​

슬라이드 1
슬라이드 2
슬라이드 3

Data API​

<div data-msk-carousel data-msk-carousel-loop="true">
  <div data-msk-carousel-viewport>
    <div data-msk-carousel-track>
      <div data-msk-carousel-slide>슬라이드 1</div>
      <div data-msk-carousel-slide>슬라이드 2</div>
    </div>
  </div>
  <button type="button" data-msk-carousel-prev>‹</button>
  <button type="button" data-msk-carousel-next>›</button>
  <div data-msk-carousel-indicators></div>
</div>

JavaScript API​

window.MSK.ui.carousel.goTo(root, 1);

Events​

root.addEventListener('msk:carousel-change', (event) => {
  console.log(event.detail.index);
});

Accessibility​

  • role="region" + aria-roledescription="carousel", 비표시 슬라이드는 aria-hidden.
  • 인디케이터 점은 JS가 슬라이드 수만큼 생성합니다.
  • data-msk-carousel-loop="true"가 아니면 양 끝에서 버튼이 비활성화됩니다.