React Carousel 개요

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

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

React Carousel Example

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

용법

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

npm install igniteui-react

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

import { IgrCarousel, IgrCarouselSlide } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

Now that you have the Ignite UI for React Carousel imported, you can start with a basic configuration of the IgrCarousel and its slides.

Use the IgrCarousel selector to wrap your slides. The slides may feature any valid html content inside, including other components.

<IgrCarousel>
    <IgrCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png"/>
    </IgrCarouselSlide>
    <IgrCarouselSlide>
        <img src="assets/images/carousel/slider-image-chart.png"/>
    </IgrCarouselSlide>
    <IgrCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-charts.png"/>
    </IgrCarouselSlide>
</IgrCarousel>

If you want a slide to be active by default, use the Active attribute:

<IgrCarousel>
    ...
    <IgrCarouselSlide>
        ...
    </IgrCarouselSlide>
    <IgrCarouselSlide active={true}>
        ...
    </IgrCarouselSlide>
</IgrCarousel>

[! 참고] 활성 슬라이드가 설정되어 있지 않으면 첫 번째 슬라이드가 기본적으로 설정됩니다. 초기 렌더링이나 이후 업데이트에서 여러 개의 활성 슬라이드가 있을 경우, 마지막 슬라이드만 고려됩니다.

예

Carousel Configuration

By default, the IgrCarousel has its disableLoop property set to false (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 disableLoop property to true.

<IgrCarousel disableLoop={true}>
    ...
</IgrCarousel>

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.

<IgrCarousel indicatorsOrientation={CarouselIndicatorsOrientation.Start}>
    ...
</IgrCarousel>

By default, the IgrCarousel displays its navigation buttons and indicators. Use the hideIndicators property to hide the indicators and the hideNavigation property to hide the navigation buttons.

<IgrCarousel hideNavigation={true} hideIndicators={true}>
    ...
</IgrCarousel>

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

<IgrCarousel vertical={true}>
    ...
</IgrCarousel>

맞춤 지표

To add React custom carousel indicators, use the IgrCarouselIndicator:

<IgrCarousel>
  <IgrCarouselIndicator>
    <span key="empty">🤍</span>
    <span slot="active">
      ❤️
    </span>
  </IgrCarouselIndicator>
  <IgrCarouselIndicator>
    <span key="empty">🤍</span>
    <span slot="active">
      ❤️
    </span>
  </IgrCarouselIndicator
  <IgrCarouselSlide>
    <img
      src="https://ko.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"
    />
  </IgrCarouselSlide>
  <IgrCarouselSlide key="second">
    <img src="https://ko.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
  </IgrCarouselSlide>
</IgrCarousel>

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

Custom navigation buttons

To achieve this, use the previous-button and next-button slots:

<IgrCarousel>
    <IgrIcon slot="previous-button" name="previous" collection="material"></IgrIcon>
    <IgrIcon slot="next-button" name="next" collection="material"></IgrIcon>
    ...
</IgrCarousel>

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

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

<IgrCarousel>
    <IgrCarouselSlide>
      <div>
        <img src="assets/images/svg/carousel/SignUp.svg" />
        <form>
          <IgrInput type="text" placeholder="Username">
            <IgrIcon slot="prefix" name="person"></IgrIcon>
          </IgrInput>
          <IgrInput type="password" placeholder="Password">
            <IgrIcon slot="prefix" name="password"></IgrIcon>
          </IgrInput>
          <IgrButton type="reset">
            <span>Sign In</span>
          </IgrButton>
        </form>
      </div>
    </IgrCarouselSlide>
    <IgrCarouselSlide>
      <div>
        <img src="assets/images/svg/carousel/Route.svg" />
        <form>
          <IgrInput type="text" placeholder="Search">
            <IgrIcon slot="prefix" name="search"></IgrIcon>
          </IgrInput>
          <IgrButton type="reset">
            <span>Search</span>
          </IgrButton>
        </form>
      </div>
    </IgrCarouselSlide>
</IgrCarousel>

데모

애니메이션

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

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

Use the animationType property to change the animation.

<IgrCarousel animationType="fade">
    ...
</IgrCarousel>

Setting none to the animationType property disables the animations.

데모

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

항해

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

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

터치 제스처

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

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

키보드 탐색

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

자동 전환

The IgrCarousel can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the interval property, which determines the amount of time in milliseconds between slides transition.

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

<IgrCarousel interval={2000} disablePauseOnInteraction={true}>
    ...
</IgrCarousel>

고급 예

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

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

• enable the disablePauseOnInteraction property
• enable the hideNavigation property
• enable the vertical property
• add transition interval
• add custom IgrCarouselIndicator for each slide

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

const images = [
    {
        src: "assets/images/carousel/WonderfulCoast.png",
        alt: "Wonderful Coast",
    },
    {
        src: "assets/images/carousel/CulturalDip.png",
        alt: "Cultural Dip",
    },
    {
        src: "assets/images/carousel/GoldenBeaches.png",
        alt: "Golden Beaches",
    },
    {
        src: "assets/images/carousel/IslandOfHistory.png",
        alt: "Island Of History",
    },
    {
        src: "assets/images/carousel/AmazingBridge.png",
        alt: "Amazing Bridge",
    },
];

<IgrCarousel
  disablePauseOnInteraction={true}
  hideNavigation={true}
  interval={2000}
  vertical={true}
  animationType="fade"
>
  {images.map((image, index) => {
    return (
      <React.Fragment key={index}>
        <IgrCarouselSlide>
          <img src={image.src} alt={image.alt} />
        </IgrCarouselSlide>
        <IgrCarouselIndicator>
          <img
            className="blurred"
            src={image.src.replace(".png", "Thumb.png")}
            alt={`${image.alt} Thumb`}
            width="50"
            height="60"
          />
          <img
            slot="active"
            src={image.src.replace(".png", "Thumb.png")}
            alt={`${image.alt} Thumb Active`}
            width="50"
            height="60"
          />
        </IgrCarouselIndicator>
      </React.Fragment>
    );
  })}
</IgrCarousel>

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

접근성

WAI-ARIA 역할, 상태 및 속성

• 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) is with role tablist.
• Each slide element is set with role tabpanel.

ARIA 지원

캐러셀 구성 요소

• Attributes
  • aria-roledescription을 "carousel"로 설정합니다.
  • aria-live - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off and polite. The default setting is polite and is set to the element that serves as the container for the set of slides. When the interval option is set and the carousel is in playing state, the aria-live attribute would be set to off.
  • 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 참조

• IgrCarousel
• IgrCarouselSlide
• IgrCarouselIndicator
• IgrIcon
• IgrInput
• IgrButton

추가 리소스

• Ignite UI for React Forums
• Ignite UI for React GitHub