Angular Carousel 구성 요소 개요

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

    Angular Carousel 구성 요소를 사용하면 애니메이션, 슬라이드 전환 및 사용자 정의 기능을 사용하여 인터페이스를 쉽게 조정하고 Angular 사용자 정의 회전형 슬라이드를 만들 수 있습니다.

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

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

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

    ng add igniteui-angular
    cmd

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

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

    이 구성 요소는 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 {}
    typescript

    또는 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 {}
    typescript

    이제 Ignite UI for Angular Carousel 모듈 또는 지시문을 가져왔으므로 구성 요소를 사용할 igx-carousel 수 있습니다.

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

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

    *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' }
        ];
    }
    typescript
    <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>
    html

    IgxCarousel 구성

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

    각 슬라이드 인덱스를 추적하기 위해 캐러셀에는 기본적으로 캐러셀에 배치 bottom 되는 표시기가 있습니다. 이 동작을 변경하려면 indicatorsOrientation 속성을 사용하고 할당해야 합니다 top. 인디케이터는 input 속성을 로 설정하여 indicators 비활성화할 수 있습니다 false.

    맞춤 지표

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

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

    맞춤 탐색 버튼

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

    ...
        <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>
    ...
    html

    다른 구성 요소가 포함된 슬라이드

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

    ...
      <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>
    ...
    html

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    App Builder | CTA 배너

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

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

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

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

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

    데모

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

    EXAMPLE
    TS
    HTML
    SCSS

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

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

    팬 동작

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

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

    키보드 탐색

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

    자동 전환

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

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

    고급 예

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

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

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

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

    ...
    <div class="carousel-wrapper">
        <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
            <igx-slide *ngFor="let item of slides">
                <!-- Slides content goes here -->
            </igx-slide>
        </igx-carousel>
    </div>
    ...
    html

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

    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>
    ...
    html

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

    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;
        });
      }
    typescript

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

    EXAMPLE
    TS
    HTML
    SCSS

    접근성

    WAI-ARIA 역할, 상태 및 속성

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

    ARIA 지원

    Attributes:
    • aria-roledscription이 'carousel'로 설정되었습니다.
    • aria-selected- 활성 슬라이드에 따라 true 또는 false로 설정됩니다.
    • aria-controls- 현재 요소에 의해 내용이 제어되는 슬라이드 인덱스를 설정합니다.
    • aria-live- 스크린 리더가 라이브 영역에 대한 업데이트를 처리해야 하는 우선순위를 설정하는 데 사용됩니다. 가능한 설정은 offpolice 입니다. 기본 설정은 예의 입니다. 간격 옵션이 설정되면 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 참조

    테마 종속성

    추가 리소스

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