react-awesome-slider는 미디어 (이미지 / 비디오) 갤러리 슬라이더 / 회전 목마를 렌더링 하는 60fps, 확장 가능하고 사용자 정의가 가능한 프로덕션 준비된 React 구성 요소입니다.

https://github.com/rcaferati/react-awesome-slider 

https://caferati.me/demo/react-awesome-slider

애니메이션 레시피 : 스케일 아웃, 폴드 아웃, 큐브, 열기 및 가을. 

애니메이션 제작 방법을 분석하려면 이 폴더를 확인하십시오. 새로운 창조적 인 것들과의 협력은 환영합니다. PR을 여십시오.

Live demo

Figma File 

컴포넌트를 Figma 프로젝트로 직접 가져옵니다.

CSS 모듈의 기본 사용법 

import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styles';

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <div data-src="/path/to/image-0.png" />
    <div data-src="/path/to/image-1.png" />
    <div data-src="/path/to/image-2.jpg" />
  </AwesomeSlider>
);

CSS 모듈을 사용하여 접는 애니메이션 레시피 

스타일이 지정된 폴더에서 더 많은 레시피를 확인하십시오. 더 많은 애니메이션 레시피를 보려면 스타일이 지정된 폴더를 확인하십시오.

import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/fold-out-animation';

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <div data-src="/path/to/image-0.png" />
    <div data-src="/path/to/image-1.png" />
    <div data-src="/path/to/image-2.jpg" />
  </AwesomeSlider>
);

CSS 모듈을 사용한 큐브 애니메이션 레시피 

스타일이 지정된 폴더에서 더 많은 레시피를 확인하십시오. 더 많은 애니메이션 레시피를 보려면 스타일이 지정된 폴더를 확인하십시오.

import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/cube-animation';

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <div data-src="/path/to/image-0.png" />
    <div data-src="/path/to/image-1.png" />
    <div data-src="/path/to/image-2.jpg" />
  </AwesomeSlider>
);