Web Components Carousel 개요

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

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

Web Components Carousel Example

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

Usage

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

npm install igniteui-webcomponents

그 다음에는 필요한 CSS를 가져오IgcCarouselComponent 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

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

defineComponents(IgcCarouselComponent);

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>

슬라이드를 기본적으로 활성화하고 싶다면, 다음Active 속성을 사용하세요:

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

[!NOTE] 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 속성은 다음과 같이 설정되었습니다 거짓 (루프는 다음 동작을 사용해 첫 번째 슬라이드가 마지막 슬라이드 다음에 오거나, 이전 동작을 사용해 마지막 슬라이드가 첫 번째 슬라이드 다음에 올 때 발생합니다.) 루프 동작은 다음 값의 값을 설정하여 비활성화할 수 있습니다.disableLoop property를 참.

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

각 슬라이드 인덱스를 추적하기 위해 회전목마에는 기본적으로 회전목마의 위치에end 표시기가 배치되어 있습니다. 이 동작을 변경하려면 속성을indicatorsOrientation 사용하고 할당start 하세요.

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

기본적으로IgcCarouselComponent 내비게이션 버튼과 표시등이 표시됩니다. 표시기를 숨기는 속성과hideIndicators 내비게이션 버튼을 숨기는 기능을 사용hideNavigation 하세요.

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

​IgcCarouselComponent수직 모드를 지원합니다. 속성을 사용vertical 해서 활성화하세요.

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

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" alt="the_red_ice_forest" />
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/card/media/yosemite.jpg" alt="yosemite" />
    </igc-carousel-slide>
</igc-carousel>

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

Custom navigation buttons

이를 위해 와previous-button 슬롯을next-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>

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>

데모

Animations

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

캐러셀은 기본적으로 애니메이션을slide 사용하도록 설정되어 있지만, 대체 애니메이션으로도 지원합니다fade.

애니메이션을 변경하려면 속성을 사용하세요animationType.

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

배경none 그animationType 속성은 애니메이션을 비활성화합니다.

데모

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

Navigation

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

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

Touch gestures

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

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

키보드 탐색

• 탐색 버튼
  • SPACE 또는 ENTER 키 - 다음/이전 슬라이드로 이동합니다.
• 지표
  • 🡐 키 - 이전(오른쪽에서 왼쪽 모드의 다음) 슬라이드로 이동합니다.
  • 🡒 키 - 다음(오른쪽에서 왼쪽 모드의 경우 이전) 슬라이드로 이동합니다.
  • HOME 키 - 첫 번째(오른쪽에서 왼쪽 모드의 마지막) 슬라이드로 이동합니다.
  • END 키 - 마지막(오른쪽에서 왼쪽 모드의 첫 번째) 슬라이드로 이동합니다.

Automatic transitioning

​IgcCarouselComponent사용자 상호작용 없이도 슬라이드를 자동으로 변경할 수 있도록 쉽게 설정할 수 있습니다. 이렇게 하면 전환 간격interval만 설정해 슬라이드 전환 간 밀리초 간격을 결정하는 방식으로 자신만의 슬라이드쇼를 만들 수 있습니다.

[!NOTE] 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>

Advanced Example

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

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

• 속성을 활성화합니다disablePauseOnInteraction​
• 속성을 활성화합니다hideNavigation​
• 속성을 활성화합니다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>

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

Accessibility

WAI-ARIA Roles, States, and Properties

• 캐러셀의 기본 요소 역할은 특정 목적과 관련된 콘텐츠를 포함하는 섹션이며region, 사용자는 쉽게 탐색할 수 있어야 할 것입니다.
• 캐러셀 표시기는 역할tab 그룹화 라벨과 함께 제공되어 사용자에게 렌더링할 탭 내용을 선택하는 메커니즘을 제공합니다
• 탭 집합(캐러셀 표시기)의 컨테이너 역할을 하는 요소는 roletablist 입니다.
• 각 슬라이드 요소는 역할tabpanel에 따라 설정되어 있습니다.

ARIA support

캐러셀 구성 요소

• Attributes
  • aria-roledescription을 "carousel"로 설정합니다.
  • Aria-Live- 라이브 지역 업데이트에 대해 스크린 리더가 어떤 우선순위로 처리해야 하는지 설정하는 데 사용되었으며, 가능한 설정은 off와 polite 입니다. 기본 설정은 정중 하며, 슬라이드 세트의 컨테이너 역할을 하는 요소로 설정되어 있습니다.interval 옵션이 설정되어 있고 회전목마가 재생 중일 때, 아리아-라이브 속성은 꺼 짐으로 설정됩니다.
  • 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로 설정됩니다.

API References

• IgcCarouselComponent
• IgcCarouselSlideComponent
• IgcCarouselIndicatorComponent
• IgcIconComponent
• IgcInputComponent
• IgcButtonComponent

Additional Resources

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components