Давайте начнем, не теряя много времени, 4 шага, чтобы добавить слайдер, как показано на изображении, в ваш проект react. Я буду использовать пакет react-awesome-slider.
01
Установите пакет
Я использую репозиторий nextjs, который вы можете скачать отсюда. Установите пакет с помощью yarn или npm.
yarn add react-awesome-slider
02
Импортируйте компонент AnimationSlider из пакета
Как уже объяснялось, импортируйте компонент, который будет обладать функцией слайдера. Этот компонент называется AwesomeSlider.
import AwesomeSlider from "react-awesome-slider";
03
Импортируйте тип CSS-анимации, который мы хотим использовать, в root и передайте его компоненту AnimationSlider.
Я использую nextjs, поэтому я добавлю CSS-анимацию глобально, то есть в файл _app.js.
import "react-awesome-slider/dist/styles.css";
import "react-awesome-slider/dist/custom-animations/fall-animation.css";
04
Добавьте дочерние элементы слайдера — изображения или текст
Вы можете использовать текст или изображения в качестве дочерних элементов слайдера. Также передайте анимацию, которую вы хотите использовать, я хочу видеть cubeAnimation, поэтому я передал ее в качестве реквизита анимации.
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 типов анимаций, таких как анимация куба, падения, раскладывания, открытия и масштабирования. На сегодня это все, до следующего раза, хорошего дня.
Хранилище кода
Продолжайте разработку
Shrey
iHateReading