멋진 슬라이더를 웹사이트에 추가하는 4단계

많은 시간을 낭비하지 않고 시작하겠습니다. 반응 프로젝트에 이미지에 표시된 대로 슬라이더를 추가하는 4단계입니다. react-awesome-slider 패키지를 사용하겠습니다.

01

패키지 설치
여기에서 다운로드할 수 있는 nextjs 저장소를 사용하고 있습니다. yarn 또는 npm을 사용하여 패키지를 설치합니다.

yarn add react-awesome-slider

02

패키지에서 AnimationSlider 구성 요소 가져오기

설명된 대로 간단하게 슬라이드 기능이 있는 구성 요소를 가져옵니다. 이 구성 요소는 AwesomeSlider라고 합니다.

import AwesomeSlider from "react-awesome-slider";

03

루트에서 사용하려는 CSS 애니메이션 유형을 가져와서 AnimationSlider 구성 요소에 전달합니다.

나는 nextjs를 사용하고 있으므로 CSS 애니메이션을 전체적으로, 즉 _app.js 파일에 추가할 것입니다.

import "react-awesome-slider/dist/styles.css";
import "react-awesome-slider/dist/custom-animations/fall-animation.css";

04

슬라이더 하위 이미지 또는 텍스트 추가

텍스트 또는 이미지를 슬라이더 자식으로 사용할 수 있습니다. 그리고 사용하고 싶은 애니메이션도 전달해주세요. 저는 cubeAnimation을 보고 싶어서 animation prop으로 전달했습니다.

import React from "react";
import AwesomeSlider from "react-awesome-slider";
const HomePage = () => {
 return (
  <AwesomeSlider animation="fallAnimation">
   <div data-src="/nextlogo.png" />
   <div data-src="/twitter-green.png" />
   <div data-src="/unsplash.png" />
  </AwesomeSlider>
 )
};
export default HomePage;

결론
마지막으로 react-awesome-slider는 큐브, 폴, 폴드아웃, 오픈, 스케일 애니메이션 등 5가지 유형의 애니메이션을 제공합니다. 오늘은 여기까지, 다음 시간까지 좋은 하루 되세요.

Code repository

계속 개발
슈리
iHateReading