Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

React.js — это популярная и мощная библиотека JavaScript для создания пользовательских интерфейсов. Вы можете использовать его для создания динамических, интерактивных и адаптивных веб-приложений.

Одним из распространенных компонентов, которые вы можете использовать с React.js, является карусель. Это легко сделать либо с помощью встроенных функций React, либо с помощью сторонней библиотеки.

Что такое карусель и для чего она нужна?

Карусель — это компонент слайд-шоу, который позволяет циклически перемещаться по изображениям или видео. Чаще всего он используется на веб-сайтах для демонстрации продуктов или услуг или демонстрации избранного контента. Использование карусели имеет много преимуществ, таких как:

  • Это эффективный способ привлечь внимание к важному контенту.
  • Это отличный способ продемонстрировать несколько изображений и видео.
  • Это помогает сохранить страницу организованной и визуально привлекательной.
  • Вы можете использовать его для создания интерактивного взаимодействия с пользователем.

Как создать карусель в React.js

Создать карусель в React.js относительно просто, и есть две популярные библиотеки, которые вы можете использовать. Вы также можете использовать встроенные функции React для добавления карусели.

Использование встроенных функций

Первый способ создания карусели в React.js — использование встроенных функций. React предоставляет мощный способ создания карусели с использованием компонентов. Ты можешь использовать хуки React для добавления и управления каруселью.

Импортировать Реагировать, {useState} от 'реагировать';

константа Карусель = () => {
константа [индекс, setIndex] = useState(0);
константа длина = 3;

константа handlePrevious = () => {
константа новыйиндекс = индекс - 1;
setIndex (новый индекс < 0? длина - 1: новый индекс);
};

константа handleNext = () => {
константа новыйИндекс = индекс + 1;
setIndex (новый индекс >= длина? 0: новый индекс);
};

возвращаться (
<div имя_класса ="карусель">
<кнопка onClick={handlePrevious}>Предыдущий</button>
<кнопка onClick={handleNext}>Следующий</button>
<п>{индекс}</п>
</div>
);
};

экспортпо умолчанию Карусель;

Этот код использует хук useState для создания переменной состояния с именем index. Это позволит отслеживать текущую позицию в карусели.

Функции handlePrevious и handleNext заботятся об обновлении значения индекса, когда пользователь нажимает на кнопку. Предыдущий и Следующий кнопки.

Наконец, разметка отображает значение индекса в теге абзаца. Вы можете отображать изображения или видео вместо текста, если хотите. Вы также можете стилизовать карусель с помощью обычного CSS или используя фреймворк CSS, такой как Tailwind CSS.

Без каких-либо причудливых стилей вы должны увидеть базовую пару кнопок и число, представляющее текущий индекс:

Использование библиотеки pure-react-carousel

Второй способ создания карусели в React.js — это библиотека pure-react-carousel. Эта библиотека предоставляет мощный способ создания карусели с использованием компонентов. Чтобы использовать библиотеку, ее сначала нужно установить с помощью команды:

нпм установить чистая реакция-карусель

После того, как вы установили библиотеку, вы можете использовать компонент для создания карусели. Вот пример того, как использовать компонент Carousel:

Импортировать Реагировать от 'реагировать';
Импортировать { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext} от «чисто-реагирующая карусель»;
Импортировать 'чистая реакция-карусель/расстояние/реакция-carousel.es.css';

константа Карусель = () => {
возвращаться (
<КарусельПровайдер
натуральныйSlideWidth={100}
натуральныйSlideHeight={120}
тоталслайдес={3}
>
<Слайдер>
<Индекс слайда={0}>Слайд 1</Slide>
<Индекс слайда={1}>Слайд 2</Slide>
<Индекс слайда={2}>Слайд 3</Slide>
</Slider>
<КнопкаНазад>Назад</ButtonBack>
<КнопкаДалее>Следующий</ButtonNext>
</CarouselProvider>
);
};

экспортпо умолчанию Карусель;

В этом коде видно, что компонент CarouselProvider определяет общие параметры карусели, такие как naturalSlideWidth, naturalSlideHeight и totalSlides.

Компонент Slider содержит несколько экземпляров Slide. Компонент «Слайд» определяет каждый отдельный слайд.

Наконец, компоненты ButtonBack и ButtonNext управляют карусельной навигацией.

Есть много преимуществ использования библиотеки pure-react-carousel, таких как:

  • Легко использовать: В то время как встроенный метод требует больше кода для создания карусели, библиотека предоставляет более простой способ создания карусели в React.js.
  • Отзывчивый: Библиотека предоставляет возможность создавать адаптивные карусели. При использовании встроенного метода вам пришлось бы создавать отдельную карусель для разных размеров экрана.
  • Настройка: Библиотека предоставляет множество функций, которые вы можете использовать для настройки карусели, таких как автовоспроизведение, стрелки навигации, нумерация страниц и многое другое.

Использование библиотеки react-responsive-carousel

Последний метод создания карусели в React.js — это библиотека react-responsive-carousel. С помощью этой библиотеки вы можете создать карусель с использованием компонентов. Чтобы использовать библиотеку, ее сначала нужно установить с помощью команды:

нпм установить реагирующая карусель

После того, как вы установили библиотеку, вы можете использовать компонент для создания карусели. Вот пример того, как использовать компонент Carousel:

Импортировать Реагировать от 'реагировать';
Импортировать { Карусель } от «реагирующая карусель»;
Импортировать 'реагировать-отклик-карусель/lib/styles/carousel.min.css';

константа Страница карусели = () => {
возвращаться (
<Карусель>
<див>
<источник изображения ="https://placehold.co/100x100" />
<р имя_класса ="легенда">Легенда 1</п>
</div>
<див>
<источник изображения ="https://placehold.co/200x200" />
<р имя_класса ="легенда">Легенда 2</п>
</div>
<див>
<источник изображения ="https://placehold.co/300x300" />
<р имя_класса ="легенда">Легенда 3</п>
</div>
</Carousel>
);
};

экспортпо умолчанию Карусельная страница;

В этом коде вы можете видеть, что компонент Carousel определяет карусель. Внутри компонента «Карусель» div содержит каждый отдельный слайд. Каждый слайд может содержать изображение, а также легенду для этого изображения. Библиотека также предоставляет ряд параметров и настроек, которые можно использовать для настройки карусели.

Есть много преимуществ использования библиотеки react-responsive-carousel, например:

  • Одна из самых популярных библиотек: Библиотека является одной из самых популярных библиотек для создания каруселей в React.js. Так что, если вы застряли, вы можете легко найти помощь от сообщества.
  • Легко использовать: С помощью всего нескольких строк кода вы можете легко создать карусель.
  • Отзывчивый: Библиотека предоставляет возможность создавать адаптивные карусели.
  • Настройка: Библиотека также предоставляет множество функций, которые можно использовать для настройки и оформления каруселей.

Улучшите пользовательский опыт с помощью карусели

С помощью карусели вы можете предоставить пользователям больше информации и облегчить им взаимодействие с вашим сайтом. Карусели также помогают упорядочить страницу и сделать ее визуально привлекательной. В результате это отличный способ улучшить пользовательский опыт.

Вы также можете отслеживать взаимодействие пользователей с каруселями и использовать данные для оптимизации взаимодействия с пользователем. Это поможет вам создать лучший пользовательский опыт на вашем сайте. После этого вы можете бесплатно развернуть свое приложение React на таких платформах, как страницы Github, что является простым и экономичным.