분류 Reactjs

AwesomeSlider : '60fps', 맞춤형 이미지 / 비디오 슬라이드 쇼

컨텐츠 정보

  • 조회 363 (작성일 )

본문

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


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


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


react-awesome-slider demo 


react-awesome-slider demo 


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


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


react-awesome-slider demo 


react-awesome-slider demo 


react-awesome-slider demo 


react-awesome-slider demo 


react-awesome-slider demo 


Live demo


css-customiser.png?raw=true 


Figma File 


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


figma.png?raw=true 


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