Angular Carousel 구성 요소 개요

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

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

    아래에 보이는 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

    This component can utilize the HammerModule optionally. It can be imported in the root module of the application in order for touch interactions to work as expected.

    // 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 {}

    Now that you have the Ignite UI for Angular Carousel module or directives imported, you can start using the igx-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>

    Configuring IgxCarousel

    By default, the Carousel in Angular has its loop input property set to true (looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action). The looping behavior can be disabled by setting the value of the loop input to false.

    <igx-carousel [loop]="false">
    ...
</igx-carousel>

    To keep track of each slide index, the carousel has indicators that are positioned at the end of the carousel by default. In order to change this behavior, use the indicatorsOrientation property and assign it to start.

    <igx-carousel indicatorsOrientation="start">
    ...
</igx-carousel>

    By default, the IgxCarousel displays its navigation buttons and indicators. Use the indicators property to hide the indicators and the navigation property to hide the navigation buttons.

    <igx-carousel [navigation]="false" [indicators]="false">
    ...
</igx-carousel>

    The IgxCarousel supports vertical mode. Use the vertical property to enable it.

    <igx-carousel [vertical]="true">
    ...
</igx-carousel>

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

    데모

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

    The carousel is configured to use the slide animation by default but it also supports fade as an alternative animation.

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

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

    Setting none to the animationType input disables carousel's animations.

    데모

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

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

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

    Pan gestures

    By default, the carousel can be used on any touch-enabled device. This is optional and can be changed by setting the gesturesSupport property to false.

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

    키보드 탐색

    • 탐색 버튼
      • Space/Enter key - navigates to the next/previous slide.
    • 지표
      • Arrow Left key - navigates to the previous (next in Right-to-Left mode) slide.
      • Arrow Right key - navigates to the next (previous in Right-to-Left mode) slide.
      • Home key - navigates to the first (last in Right-to-Left mode) slide.
      • End key - navigates to the last (first in Right-to-Left mode) slide.

    Automatic transitioning

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

    Note

    The automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting pause property to false.

    Advanced Example

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

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

    • disable gesturesSupport
    • disable the navigation buttons
    • disable the carousel indicators
    • disable the pause on user interaction with the slide
    • add transition 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>
...

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

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

    syncing the components by hooking up on carousel's slideChanged and list's itemClicked events:

    Note

    As of v15.1.0 onSlideChanged was renamed to slideChanged. Using ng update will automatically migrate your code prior to use the new event name.

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

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

    기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

    기본 속성 종속 속성 설명
    $button 배경
    		 $button 호버 배경 마우스를 가리키는 버튼의 배경색입니다.
    $button 화살표 색상단추 화살표의 색입니다.
    $button 비활성화 배경비활성화된 경우 버튼의 배경색입니다.
    $indicator 초점 색상
    ($indicator-background가 제공되지 않는 경우)    		초점을 맞췄을 때의 표시기 색상입니다.
    $button 호버 배경 $button-호버-화살표-색상 마우스를 가져갈 때 단추 화살표의 색입니다.
    $button 비활성화 배경 $button 비활성화 화살표 색상 비활성화된 경우 단추 화살표의 색상입니다.
    $button-호버-화살표-색상 $button-초점-화살표-색상 초점을 맞췄을 때의 버튼 화살표 색상입니다.
    $button-초점-화살표-색상 $button 초점 테두리 색상 포커스가 있을 때 단추의 테두리 색상입니다.
    $indicator 배경
    		 테두리 색상 $indicator 표시기 테두리의 색상입니다.
    $indicator-액티브 도트 색상활성화된 경우 표시기 점의 색상입니다.
    $indicator 초점 색상초점을 맞췄을 때의 표시기 색상입니다.
    $indicator-액티브 도트 색상
    		 $indicator-액티브 호버-도트 컬러 활성 상태에서 마우스를 가져갔을 때의 표시기 색상입니다.
    $indicator-활성 테두리 색상활성화된 경우 표시기 테두리의 색상입니다.
    $indicator 도트 컬러 $indicator-호버-도트 색상 호버 시 표시기 점의 색상입니다.
    기본 속성 종속 속성 설명
    $button 배경
    		 $button 호버 배경 마우스를 가리키는 버튼의 배경색입니다.
    $button 화살표 색상단추 화살표의 색입니다.
    $button 비활성화 배경비활성화된 경우 버튼의 배경색입니다.
    $button 초점 테두리 색상포커스가 있을 때 단추의 테두리 색상입니다.
    $indicator 초점 색상
    ($indicator-background가 제공되지 않는 경우)    		초점을 맞췄을 때의 표시기 색상입니다.
    $button 호버 배경 $button-호버-화살표-색상 마우스를 가져갈 때 단추 화살표의 색입니다.
    $button 비활성화 배경 $button 비활성화 화살표 색상 비활성화된 경우 단추 화살표의 색상입니다.
    $button-호버-화살표-색상 $button-초점-화살표-색상 초점을 맞췄을 때의 버튼 화살표 색상입니다.
    $indicator 배경
    		 테두리 색상 $indicator 표시기 테두리의 색상입니다.
    $indicator-액티브 도트 색상활성화된 경우 표시기 점의 색상입니다.
    $indicator 초점 색상초점을 맞췄을 때의 표시기 색상입니다.
    $indicator-액티브 도트 색상
    		 $indicator-액티브 호버-도트 컬러 활성 상태에서 마우스를 가져갔을 때의 표시기 색상입니다.
    $indicator-활성 테두리 색상활성화된 경우 표시기 테두리의 색상입니다.
    $indicator 도트 컬러 $indicator-호버-도트 색상 호버 시 표시기 점의 색상입니다.
    기본 속성 종속 속성 설명
    $button 배경
    		 $button 호버 배경 마우스를 가리키는 버튼의 배경색입니다.
    $button 화살표 색상단추 화살표의 색입니다.
    $button 비활성화 배경비활성화된 경우 버튼의 배경색입니다.
    $button 초점 테두리 색상포커스가 있을 때 단추의 테두리 색상입니다.
    $indicator 초점 색상
    ($indicator-background가 제공되지 않는 경우)    		초점을 맞췄을 때의 표시기 색상입니다.
    $button 호버 배경 $button-호버-화살표-색상 마우스를 가져갈 때 단추 화살표의 색입니다.
    $button 비활성화 배경 $button 비활성화 화살표 색상 비활성화된 경우 단추 화살표의 색상입니다.
    $button-호버-화살표-색상 $button-초점-화살표-색상 초점을 맞췄을 때의 버튼 화살표 색상입니다.
    $indicator 배경
    		 테두리 색상 $indicator 표시기 테두리의 색상입니다.
    $indicator-액티브 도트 색상활성화된 경우 표시기 점의 색상입니다.
    $indicator 초점 색상초점을 맞췄을 때의 표시기 색상입니다.
    $indicator-액티브 도트 색상
    		 $indicator-액티브 호버-도트 컬러 활성 상태에서 마우스를 가져갔을 때의 표시기 색상입니다.
    $indicator-활성 테두리 색상활성화된 경우 표시기 테두리의 색상입니다.
    $indicator 도트 컬러 $indicator-호버-도트 색상 호버 시 표시기 점의 색상입니다.
    기본 속성 종속 속성 설명
    $button 배경
    		 $button 호버 배경 마우스를 가리키는 버튼의 배경색입니다.
    테두리 색상 $button단추의 테두리 색입니다.
    $button 화살표 색상단추 화살표의 색입니다.
    $button 비활성화 배경비활성화된 경우 버튼의 배경색입니다.
    $indicator-액티브 도트 색상
    ($indicator-background가 제공되지 않는 경우)    		활성화된 경우 표시기 점의 색상입니다.
    $button 호버 배경 $button-호버-화살표-색상 마우스를 가져갈 때 단추 화살표의 색입니다.
    $button 비활성화 배경 $button 비활성화 화살표 색상 비활성화된 경우 단추 화살표의 색상입니다.
    테두리 색상 $button $button-호버 테두리 색상 마우스를 가리키는 버튼의 테두리 색입니다.
    $button-호버-화살표-색상 $button-초점-화살표-색상 초점을 맞췄을 때의 버튼 화살표 색상입니다.
    $indicator 배경
    		 $indicator 도트 컬러 표시기 점의 색상입니다.
    $indicator-액티브 도트 색상활성화된 경우 표시기 점의 색상입니다.
    $indicator 도트 컬러
    		 $indicator-호버-도트 색상 호버 시 표시기 점의 색상입니다.
    테두리 색상 $indicator표시기 테두리의 색상입니다.
    $indicator-액티브 도트 색상
    		 $indicator-액티브 호버-도트 컬러 활성 상태에서 마우스를 가져갔을 때의 표시기 색상입니다.
    $indicator-활성 테두리 색상활성화된 경우 표시기 테두리의 색상입니다.
    $button 초점 테두리 색상포커스가 있을 때 단추의 테두리 색상입니다.
    $indicator-액티브 호버-도트 컬러 $indicator 초점 색상 초점을 맞췄을 때의 표시기 색상입니다.

    Using the Ignite UI for Angular Theming, we can greatly alter the carousel appearance.

    First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the carousel-theme, and by providing just a few base parameters like $button-background and $indicator-background, the theme will generate the appropriate state-specific colors and contrasting foregrounds. You can also override any of the available parameters if you want more control over the appearance.

    $carousel-theme: carousel-theme(
  $button-background: #7c32dd,
  $indicator-background: #7c32dd,
);

    마지막 단계는 구성 요소의 테마를 포함하는 것입니다.

    @include css-vars($carousel-theme);

    데모

    아래 샘플은 Ignite UI for Angular 통해 적용된 간단한 스타일링을 보여줍니다.

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일carousel 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-carousel​dark-carousel 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    ​carousel-theme에서 전체 속성 목록을 찾을 수 있습니다. 구문은 다음과 같습니다.

    <igx-carousel class="!light-carousel
![--indicator-background:#a7b6de] 
![--button-background:#a7b6de] 
![--indicator-border-color:#3E4853]">
  ...
</igx-carousel>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 캐러셀은 다음과 같아야 합니다.

    Accessibility

    WAI-ARIA Roles, States, and Properties

    • The Carousel base element role is region - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily.
    • Carousel indicators are with role tab - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user
    • The element that serves as the container for the set of tabs (carousel indicators) role is set to tablist.
    • Each slide element is set with role 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 - 다음 슬라이드용.

    슬라이드 구성요소

    역할
    • attr.role="tabpanel"- 각 탭이 탭 목록에 포함되어 있는 탭과 연결된 리소스에 대한 컨테이너입니다.
    Attributes
    • id - "panel-${this.index}" 패턴을 따릅니다.
    • aria-labelledby는 "tab-${this.index}-${this.total}" 패턴을 따릅니다.
    • 아리아가 선택한​ ​활성 슬라이드를 설정합니다. 특정 슬라이드 요소의 현재 선택된 상태를 나타냅니다.

    API References

    Theming Dependencies

    Additional Resources

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