Web Components Carousel 개요

Ignite UI for Web Components 캐러셀은 텍스트 슬라이드, 링크 및 기타 html 요소가 있는 이미지 컬렉션을 앞뒤로 탐색하는 사용자를 위해 슬라이드쇼와 같은 웹 환경을 만들 수 있는 가장 유연한 방법을 제공하는 응답성이 뛰어난 경량 구성 요소입니다.

Web Components Carousel 구성 요소를 사용하면 애니메이션, 슬라이드 전환 및 사용자 지정을 사용할 수 있으므로 인터페이스를 쉽게 조정하고 사용자 정의 캐러셀 Web Components 구축할 수 있습니다.

Web Components Carousel Example

아래에서 볼 수 있는 Web Components Carousel 데모는 이미지만 포함된 슬라이드를 보여줍니다.

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent);

export class CarouselOverview {
    constructor() {}
}

new CarouselOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-charts.png"/>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-container {
    padding: 16px;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    object-fit: fill;
    max-width: 90%;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 450px;
}

igc-carousel-slide::part(base) {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 75%;
    margin-inline: auto;
}css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents
cmd

그런 다음 필요한 CSS를 IgcCarouselComponent 가져오고 다음과 같이 모듈을 등록해야 합니다.

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCarouselComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

이제 Ignite UI for Web Components Carousel을 가져왔으므로 및 해당 슬라이드의 IgcCarouselComponent 기본 구성부터 시작할 수 있습니다.

선택기를 IgcCarouselComponent 사용하여 슬라이드를 래핑합니다. 슬라이드에는 다른 구성 요소를 포함하여 유효한 html 콘텐츠가 포함될 수 있습니다.

<igc-carousel>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-indigo-design.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/slider-image-chart.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-charts.png"/>
    </igc-carousel-slide>
</igc-carousel>
html

슬라이드가 기본적으로 활성화되도록 하려면 다음 속성을 사용합니다 Active.

<igc-carousel>
    ...
    <igc-carousel-slide>
        ...
    </igc-carousel-slide>
    <igc-carousel-slide active>
        ...
    </igc-carousel-slide>
</igc-carousel>
html

If no active slide is set, the first one will be set by default. If there are multiple active slides on initial rendering or subsequent updates, only the last one will be taken into account.

Examples

Carousel Configuration

기본적으로 의 IgcCarouselComponent disableLoop 속성은 false로 설정되어 있습니다(다음 작업을 사용하여 탐색하여 첫 번째 슬라이드가 마지막 슬라이드 뒤에 오거나 이전 작업을 사용하여 첫 번째 슬라이드 뒤에 올 때 반복이 발생합니다). 루핑 동작은 속성 값을 disableLoop true로 설정하여 비활성화할 수 있습니다.

<igc-carousel disable-loop="true">
    ...
</igc-carousel>
html

각 슬라이드 인덱스를 추적하기 위해 캐러셀에는 기본적으로 캐러셀에 배치 end 되는 표시기가 있습니다. 이 동작을 변경하려면 속성을 사용하여 indicatorsOrientation 할당합니다 start.

<igc-carousel indicators-orientation="start">
    ...
</igc-carousel>
html

기본적으로 탐색 IgcCarouselComponent 버튼과 표시기가 표시됩니다. hideIndicators이 속성을 사용하여 표시기를 숨기고 hideNavigation 속성을 사용하여 탐색 단추를 숨깁니다.

<igc-carousel hide-navigation="true" hide-indicators="true">
    ...
</igc-carousel>
html

IgcCarouselComponent 수직 모드를 지원합니다. vertical 속성을 사용하여 사용하도록 설정합니다.

<igc-carousel vertical="true">
    ...
</igc-carousel>
html

Custom indicators

Web Components 사용자 지정 캐러셀 표시기를 추가하려면 다음을 사용합니다. IgcCarouselIndicatorComponent

<igc-carousel>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>

    <igc-carousel-slide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/card/media/yosemite.jpg"/>
    </igc-carousel-slide>
</igc-carousel>
html

Ignite UI for Web Components Carousel 구성 요소를 사용하면 단일 지표의 활성 및 비활성 상태에 대해 서로 다른 요소를 사용할 수 있습니다. 인디케이터를 선언할 때 각 슬롯에 대해 두 개의 요소(empty 및 active)를 제공해야 하며, 이는 동일하더라도 마찬가지입니다.

이를 위해 및 next-button 슬롯을 previous-button 사용합니다.

<igc-carousel>
    <igc-icon slot="previous-button" name="previous" collection="material"></igc-icon>
    <igc-icon slot="next-button" name="next" collection="material"></igc-icon>
    ...
</igc-carousel>
html

Slide containing other components

이 캐러셀에는 양식과 이미지가 포함된 슬라이드가 포함됩니다.

<igc-carousel>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg"/>
            <form>
                <igc-input type="text" placeholder="Username">
                    <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                    <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg"/>
            <form>
                <igc-input type="text" placeholder="Search">
                    <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
</igc-carousel>
html

데모

import { defineComponents, IgcButtonComponent, IgcCarouselComponent, IgcIconComponent, IgcInputComponent, registerIconFromText } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcInputComponent, IgcButtonComponent, IgcIconComponent);

const icons = [
    {
        name: "person",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z"/></svg>'
    },
    {
        name: "password",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16Z"/></svg>'
    },
    {
        name: "search",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>'
    }
];

export class CarouselComponents {
    constructor() {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText);
        });
    }
}

new CarouselComponents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel With Components</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/SignUp.svg">
              <form>
                <igc-input type="text" placeholder="Username">
                  <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                  <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
              </form>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/Route.svg">
              <form>
                <igc-input type="text" placeholder="Search">
                  <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
              </form>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.carousel-container {
    padding: 16px;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 500px;
}

igc-carousel-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

igc-carousel-slide div {
    text-align: center;
    max-width: 40%;
    margin-inline: auto;
}

igc-carousel-slide div * {
    margin-block: 8px;
}css

Animations

애니메이션 슬라이드 전환은 최종 사용자에게 회전판과 상호 작용할 때 좋은 경험을 제공합니다.

캐러셀은 기본적으로 애니메이션을 slide 사용하도록 구성되지만 대체 애니메이션으로도 지원됩니다 fade.

Use the animationType property to change the animation.

<igc-carousel animation-type="fade">
    ...
</igc-carousel>
html

Setting none to the animationType property disables the animations.

데모

아래 데모는 캐러셀이 지원하는 다양한 유형의 애니메이션을 보여줍니다.

import { defineComponents, IgcButtonComponent, IgcCardComponent, IgcCarouselComponent, IgcSelectComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcSelectComponent, IgcCardComponent, IgcButtonComponent, IgcSwitchComponent);

export class CarouselAnimations {
    private carousel: IgcCarouselComponent;
    private select: IgcSelectComponent;
    private switch: IgcSwitchComponent;

    constructor() {
        this.carousel = document.querySelector('igc-carousel') as IgcCarouselComponent;
        this.select = document.querySelector('igc-select') as IgcSelectComponent;
        this.switch = document.querySelector('igc-switch') as IgcSwitchComponent;

        this.select.addEventListener("igcChange", (e) => {
            const animation = e.detail.value as 'slide' | 'fade' | 'none';
            this.carousel.animationType = animation;
        });

        this.switch.addEventListener("igcChange", (e) => {
            this.carousel.vertical = e.detail.checked;
        });
    }
}

new CarouselAnimations();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Animations</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-wrapper">
        <div class="action-wrapper">
          <div class="action">
            <span>Animation type</span>
            <igc-select id="select">
              <igc-select-item value="slide" selected>Slide</igc-select-item>
              <igc-select-item value="fade">Fade</igc-select-item>
              <igc-select-item value="none">None</igc-select-item>
            </igc-select>
          </div>
          <div class="action">
            <igc-switch label-position="before">Vertical alignment</igc-switch>
          </div>
        </div>
        <igc-carousel hide-indicators>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Angular</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>30+ Material-based Angular components to code speedy web apps faster.</p>
                </igc-card-content> 
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Javascript</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ultimate UI for ASP.NET</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/aspnet" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-wrapper {
    height: 600px;
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.action-wrapper {
    height: 40px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.action {
    display: flex;
    align-items: center;
}

.slide-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

igc-carousel {
    border: 0.5px solid #dde0e4;
}

igc-select {
    width: 150px;
    margin-left: 10px;
    --ig-size: var(--ig-size-small);
}

igc-card {
    border: none;
}

igc-card-header {
    padding: 8px 16px;
}css

전환 및 탐색은 캐러셀의 가장 중요한 기능입니다.

캐러셀의 탐색은 사용자가 모바일 장치에서 탐색 버튼, 표시기, 키보드 탐색 및 터치 조작을 통해 처리할 수 있습니다.

Touch gestures

기본적으로 캐러셀은 모든 터치 지원 장치에서 사용할 수 있습니다.

캐러셀 애니메이션은 터치 장치에서 완벽하게 지원되므로 캐러셀은 모든 플랫폼과 일관되고 프로그레시브 웹 애플리케이션(PWA)에서 사용될 때 훌륭합니다.

탐색 버튼
- Space / Enter key - 다음/이전 슬라이드로 이동합니다.
지표
- Arrow Left 키 - 이전(오른쪽에서 왼쪽 모드에서 다음) 슬라이드로 이동합니다.
- Arrow Right 키 - 다음(오른쪽에서 왼쪽 모드의 이전) 슬라이드로 이동합니다.
- Home 키 - 첫 번째(오른쪽에서 왼쪽 모드의 마지막) 슬라이드로 이동합니다.
- End 키 - 마지막(오른쪽에서 왼쪽 모드의 첫 번째) 슬라이드로 이동합니다.

Automatic transitioning

IgcCarouselComponent 사용자 상호 작용 없이 슬라이드를 자동으로 변경하도록 쉽게 구성할 수 있습니다. 이렇게 하면 속성에 대한 interval 전환 간격만 설정하여 자신만의 슬라이드 쇼를 만들 수 있으며, 이 간격은 슬라이드 전환 사이의 시간(밀리초)을 결정합니다.

Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. This can be prevented by setting disablePauseOnInteraction property to true.

<igc-carousel interval="2000" disable-pause-on-interaction="true">
    ...
</igc-carousel>
html

Advanced Example

루핑이 활성화된 완전 자동화된 캐러셀을 만들어 보겠습니다. 표시기를 각 슬라이드의 썸네일 표현으로 구성합니다.

이 목표를 달성하려면 캐러셀에 대해 다음 구성을 수행해야 합니다.

속성을 활성화합니다. disablePauseOnInteraction
enable the hideNavigation property
속성을 활성화합니다. vertical
add transition interval
각 슬라이드에 대한 사용자 지정 IgcCarouselIndicatorComponent 추가

캐러셀은 템플릿에서 다음과 같이 표시됩니다.

<igc-carousel
    disable-pause-on-interaction="true"
    hide-navigation="true"
    vertical="true"
    interval="2000"
    animation-type="fade"
>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
        
    <igc-carousel-slide>
        <img src="assets/images/carousel/WonderfulCoast.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/CulturalDip.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/GoldenBeaches.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/IslandOfHistory.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/AmazingBridge.png"/>
    </igc-carousel-slide>
</igc-carousel>
html

이러한 구성의 결과는 다음과 같습니다.

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent);

export class CarouselThumbnail {
    constructor() {}
}

new CarouselThumbnail();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Thumbnail</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-carousel
          disable-pause-on-interaction
          hide-navigation
          interval="2000"
          vertical
          animation-type="fade"
        >
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
        
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png"
              alt="Wonderful Coast"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDip.png"
              alt="Cultural Dip"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png"
              alt="Golden Beaches"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png"
              alt="Island Of History"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridge.png"
              alt="Amazing Bridge"
            />
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-carousel {
    margin-inline: auto;
    max-width: 75%;
}

igc-carousel::part(indicators) {
    border-radius: 2px;
}

.blurred {
    filter: blur(2px);
    opacity: 0.5;
}css

Accessibility

WAI-ARIA Roles, States, and Properties

Carousel 기본 요소 역할은 특정 목적과 관련된 콘텐츠가 포함된 섹션인 region 이며 사용자는 쉽게 탐색할 수 있기를 원할 것입니다.
캐러셀 표시기에는 역할 tab 있습니다. 사용자에게 렌더링할 탭 콘텐츠를 선택하기 위한 메커니즘을 제공하는 그룹화 레이블입니다.
탭 집합(캐러셀 표시기)의 컨테이너 역할을 하는 요소는 역할 tablist이 있습니다.
각 슬라이드 요소는 tabpanel 역할로 설정됩니다.

ARIA support

캐러셀 구성 요소

Attributes
- aria-roledescription을 "carousel"로 설정합니다.
- aria-live- 스크린 리더가 라이브 영역에 대한 업데이트를 처리해야 하는 우선 순위를 설정하는 데 사용되며, 가능한 설정은 다음과 같습니다.off 및 polite. 기본 설정은 polite 이며 슬라이드 집합의 컨테이너 역할을 하는 요소로 설정됩니다. interval 옵션이 설정되고 캐러셀이 재생 중인 상태이면 aria-live 속성이 off로 설정됩니다.
- aria-label (navigation buttons) - "Previous slide"/"Next slide".

Slide component

Attributes
- id - "igc-carousel-slide-${incremented_number}" 패턴을 따릅니다.
- aria-roledescription을 "slide"로 설정합니다.
- aria-label은 "${total}의 ${index + 1}" 패턴을 따릅니다.

Indicator component

Attributes
- aria-label은 "Slide ${index + 1}" 패턴을 따릅니다.
- aria-selected는 활성 슬라이드에 따라 true 또는 false로 설정됩니다.