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

기본적으로 Angularloop의 캐러셀은 입력 속성이 다음과true 같이 설정되어 있습니다(루프는 다음 행동을 사용해 첫 슬라이드가 마지막 슬라이드 다음에 오거나, 이전 행동을 사용해 첫 번째 슬라이드가 첫 번째 슬라이드 다음에 올 때 발생합니다). 반복 동작은 입력 값을loop로false 설정하여 비활성화할 수 있습니다.

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

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

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

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

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

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

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

데모

Angular Carousel Animations

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

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

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

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

입력 설정none은animationType 회전목마 애니메이션을 비활성화합니다.

데모

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

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

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

Pan gestures

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

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

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

Automatic transitioning

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

Note

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

Advanced Example

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

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

비활성화gesturesSupport
버튼을 비활성화navigation 하세요
회전목마 비활성화indicators
슬라이드와의 사용자 상호작용을pause 비활성화하세요
전환 추가(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>
...

캐러셀과slideChanged 리스트의 아이템에 연결하여 구성 요소를 동기화하기. 클릭한 이벤트:

Note

v15.1.0onSlideChanged부터 이름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;
    });
  }

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

Angular Carousel Styling

Carousel Theme Property Map

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

재료 유창한 부트스트랩 남빛

기본 속성	종속 속성	설명
$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 초점 색상	초점을 맞췄을 때의 표시기 색상입니다.

Ignite UI for Angular 테마를 사용하면 외관을carousel 크게 바꿀 수 있습니다.

먼저, 테마 엔진에서 노출된 기능을 사용하려면 파일을 스타일 파일에 가져와index야 합니다:

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

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

가장 간단한 접근법을 따라, 회전목마 테마를 확장하는 새로운 테마를 만들고, 와$button-background 같은$indicator-background 몇 가지 기본 매개변수만 제공하면 테마가 적절한 주별 색상과 대비되는 전경을 생성합니다. 외관을 더 조절하고 싶다면 사용 가능한 매개변수를 무시할 수도 있습니다.

$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-carouseldark-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

캐러셀의 기본 요소 역할은 특정 목적과 관련된 콘텐츠를 포함하는 섹션이며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 - 다음 슬라이드용.

슬라이드 구성요소

역할

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

Angular Carousel Styling

Carousel Theme Property Map

데모

Styling with Tailwind

Note

Accessibility

WAI-ARIA Roles, States, and Properties

ARIA support

캐러셀 구성요소

Attributes

슬라이드 구성요소

역할

Attributes

API References

Theming Dependencies

Additional Resources

테마