Angular Carousel 구성 요소 개요

Ignite UI for Angular 텍스트 슬라이드, 링크 및 기타 HTML 요소가 포함된 이미지 컬렉션을 앞뒤로 탐색하는 사용자를 위해 슬라이드쇼와 같은 웹 경험을 만드는 가장 유연한 방법을 제공하는 반응성이 뛰어난 경량 구성 요소입니다.

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

Angular Carousel Example

아래에 보이는 Angular Carousel 데모는 이미지만 포함된 슬라이드를 보여줍니다. 우리는 사용자가 한 슬라이드에서 다른 슬라이드로 쉽게 이동할 수 있도록 탐색 버튼을 활성화했습니다.

Getting Started with Ignite UI for Angular Carousel

Ignite UI for Angular Carousel 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

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

다음 단계는 app.module.ts 파일에서 IgxCarouselModule을 가져오는 것입니다.

Note

이 구성 요소를 사용하려면 터치 상호 작용이 예상대로 작동하려면 응용 프로그램의 루트 모듈에서 HammerModule 가져와야 합니다.

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxCarouselModule } from 'igniteui-angular';
// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., HammerModule, IgxCarouselModule],
    ...
})
export class AppModule {}

또는 16.0.0부터 IgxCarouselComponent 독립형 종속성으로 가져오거나 IGX_CAROUSEL_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
})
export class HomeComponent {}

이제 Ignite UI for Angular 가져왔으므로 igx-carousel 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Carousel Component

Ignite UI for Angular 전체 화면 요소로 사용되거나 다른 구성 요소 내에 위치할 수 있습니다. 또한 슬라이드에는 다른 Angular 구성 요소를 포함하여 유효한 HTML 콘텐츠가 포함되어 있을 수 있습니다.

이 섹션에서는 위에 정의된 데모의 설정을 살펴보겠습니다.

Adding slides with *ngFor

동일한 유형의 콘텐츠가 포함된 슬라이드가 있는 경우 가장 쉬운 방법은 *ngFor를 사용하여 해당 콘텐츠를 템플릿에 추가하는 것입니다.

슬라이드에는 이미지만 포함될 것이므로 ts 파일에 객체 배열을 생성하고 이를 사용하여 igx-carousel을 슬라이드로 채울 것입니다.

@Component({...})
export class HomeComponent {
    public slides = [
        { src: '/assets/images/carousel/ignite-ui-angular-indigo-design.png' },
        { src: '/assets/images/carousel/slider-image-chart.png' },
        { src: '/assets/images/carousel/ignite-ui-angular-charts.png' }
    ];
}

<div class="carousel-container">
    <igx-carousel #carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
</div>

Angular Carousel Custom Examples

Configuring IgxCarousel

기본적으로 Angular의 Carousel은 loop 입력 속성이 true로 설정되어 있습니다(다음 작업을 사용하여 탐색하여 첫 번째 슬라이드가 마지막 슬라이드 뒤에 올 때 또는 이전 작업을 사용하여 마지막 슬라이드가 첫 번째 슬라이드 뒤에 올 때 반복이 발생함). loop 입력 값을 false로 설정하여 루프 동작을 비활성화할 수 있습니다.

각 슬라이드 인덱스를 추적하기 위해 캐러셀에는 기본적으로 캐러셀 bottom에 표시기가 있습니다. 이 동작을 변경하려면 IndicatorsOrientation 속성을 사용하고 이를 top에 할당해야 합니다. 빈 템플릿을 추가하여 표시기를 비활성화할 수 있습니다.

캐러셀 템플릿은 다음과 같습니다.

<div class="carousel-container">
    <igx-carousel #carousel [loop]="false">
      ...
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>

Custom indicators

Angular 사용자 정의 캐러셀 표시기를 추가하려면 다음과 같이 IgxCarouselIndicatorDirective를 사용해야 합니다.

...
  <ng-template igxCarouselIndicator let-slide>
      <div [ngClass]="{'selected': slide.current === current}"></div>
  </ng-template>
...

Custom nav buttons

이를 달성하기 위해 IgxCarouselPrevButtonDirective 및 IgxCarouselNextButtonDirective 지시문을 사용합니다.

...
    <ng-template igxCarouselNextButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </ng-template>

    <ng-template igxCarouselPrevButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
    </ng-template>
...

Slide containing other components

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

...
  <div class="carousel-container">
    <igx-carousel>
        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/SignUp.svg">
                <form #form class="signInForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>person</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Username</label>
                        <input igxInput id="username" type="text" />
                    </igx-input-group>
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>lock</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="password">Password</label>
                        <input igxInput id="password" type="password" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button>
                </div>
            </div>
        </igx-slide>

        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/Route.svg">
                <form #form2 class="searchForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>search</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Search</label>
                        <input igxInput id="search" type="text" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="contained" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

데모

Angular Carousel Animations

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

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

애니메이션은 다음과 같이 animationType 입력을 통해 구성됩니다.

<igx-carousel animationType="fade">
...
</igx-carousel>

animationType 입력에 none 설정하면 캐러셀의 애니메이션이 비활성화됩니다.

데모

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

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

캐러셀의 탐색은 모바일 장치의 탐색 버튼, 키보드 탐색 및 팬 상호 작용을 통해 사용자가 처리할 수 있습니다.

Pan gestures

기본적으로 캐러셀은 모든 터치 지원 장치에서 사용할 수 있습니다. 이는 선택 사항이며 GesturesSupport 속성을 false로 설정하여 변경할 수 있습니다.

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

다음 / 이전 슬라이드로 이동하려면 다음을 정중하게 사용해야 합니다.
- 다음 슬라이드의 Arrow Right 키
- 이전 슬라이드의 화살표 Arrow Left 키
끝 / 시작 슬라이드로 이동하려면 다음을 정중하게 사용해야 합니다.
- 끝 슬라이드의 End 키
- 시작 슬라이드의 Home 키

Automatic transitioning

IgxCarousel은 사용자 상호 작용 없이 자동으로 슬라이드를 변경하도록 쉽게 구성할 수 있습니다. 이 방법을 사용하면 슬라이드 전환 사이의 시간을 밀리초 단위로 결정하는 간격 속성에 전환 간격을 설정하기만 하면 자신만의 슬라이드쇼를 만들 수 있습니다.

Note

자동 슬라이드 전환은 기본적으로 완전히 사용자 독립적이지 않습니다. 슬라이드 위에 마우스 포인터를 놓으면 마우스 포인터가 슬라이드 영역을 떠날 때까지 현재 슬라이드 전환이 중단됩니다. 이는 일시 중지 속성을 false로 설정하여 방지할 수 있습니다.

Advanced Example

반복이 활성화된 완전 자동화된 캐러셀을 만들어 보겠습니다. 각 슬라이드는 목록의 목록 항목과 동기화됩니다. 목록 항목을 클릭하면 슬라이드 변경이 시작됩니다.

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

gesturesSupport 비활성화지원
navigation 버튼 비활성화
캐러셀 indicators 비활성화
슬라이드와의 사용자 상호 작용 pause 비활성화합니다.
전환 interval 추가

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

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <div class="slides-wrapper">
            <igx-slide *ngFor="let item of slides">
                  <!-- Slides content goes here -->
             </igx-slide>
        </div>
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>
...

캐러셀 구성이 준비되었습니다. 이제 목록 구성 요소를 추가하고 두 구성 요소를 모두 동기화하기만 하면 됩니다.

adding IgxList:

...
<div class="list-wrapper">
    <igx-list>
      <!-- Adding disabled classes when the list item index does not match the current slide index-->
        <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
      <!-- List item content goes here -->
        </igx-list-item>
    </igx-list>
</div>
...

캐러셀의 slideChanged 및 목록의 itemClicked 이벤트를 연결하여 구성요소를 동기화합니다.

Note

v15.1.0부터 onSlideChanged slideChanged로 이름이 변경되었습니다. ng update 사용하면 새 이벤트 이름을 사용하기 전에 코드가 자동으로 마이그레이션됩니다.

  public ngOnInit() {
    this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => {
        this.currentIndex = args.item.index;
        this.carousel.select(this.carousel.get(this.currentIndex));
    });

    this.carousel.slideChanged.subscribe((args: ISlideEventArgs) => {
        this.currentIndex = args.slide.index;
    });
  }

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

Accessibility

WAI-ARIA Roles, States, and Properties

Carousel 기본 요소 역할은 특정 목적과 관련된 콘텐츠가 포함된 섹션인 region 이며 사용자는 쉽게 탐색할 수 있기를 원할 것입니다.
캐러셀 표시기에는 역할 tab 있습니다. 사용자에게 렌더링할 탭 콘텐츠를 선택하기 위한 메커니즘을 제공하는 그룹화 레이블입니다.
탭 집합(캐러셀 표시기) 역할에 대한 컨테이너 역할을 하는 요소는 tablist로 설정됩니다.
각 슬라이드 요소는 tabpanel 역할로 설정됩니다.
igx-slides 세트의 컨테이너 역할을 하는 요소는 aria-live ="polite"로 설정됩니다. 두 옵션 모두
- off: 캐러셀이 자동으로 회전하는 경우.
- 예의: 캐러셀이 자동으로 회전하지 않는 경우.

ARIA support

캐러셀 구성요소

Attributes:

aria-roledscription이 'carousel'로 설정되었습니다.
aria-selected- 활성 슬라이드에 따라 true 또는 false로 설정됩니다.
aria-controls- 현재 요소에 의해 내용이 제어되는 슬라이드 인덱스를 설정합니다.
aria-live- 스크린 리더가 라이브 영역에 대한 업데이트를 처리해야 하는 우선순위를 설정하는 데 사용됩니다. 가능한 설정은 off 및 police 입니다. 기본 설정은 예의 입니다. 간격 옵션이 설정되면 aria-live 속성이 off로 설정됩니다.
aria-label 슬라이드 기반.
아리아 라벨(버튼)
- aria-label - 이전 슬라이드용.
- aria-label - 다음 슬라이드용.

슬라이드 구성요소

Roles:

attr.role="tabpanel"- 각 탭이 탭 목록에 포함되어 있는 탭과 연결된 리소스에 대한 컨테이너입니다.

Attributes:

id - "panel-${this.index}" 패턴을 따릅니다.
aria-labelledby는 "tab-${this.index}-${this.total}" 패턴을 따릅니다.
아리아가 선택한 활성 슬라이드를 설정합니다. 특정 슬라이드 요소의 현재 선택된 상태를 나타냅니다.

API References

Theming Dependencies

IgxIcon 테마

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular Carousel 구성 요소 개요

Angular Carousel Example

Getting Started with Ignite UI for Angular Carousel

Note

Using the Angular Carousel Component

Adding slides with *ngFor

Angular Carousel Custom Examples

Configuring IgxCarousel

Custom indicators

Custom nav buttons

Slide containing other components

데모

Angular Carousel Animations

데모

Navigation

Pan gestures

키보드 탐색

Automatic transitioning

Note

Advanced Example

Note

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

캐러셀 구성요소

Attributes:

슬라이드 구성요소

Roles:

Attributes:

API References

Theming Dependencies

Additional Resources

테마