ВНЕДРЕНИЕ КОМПОНЕНТА-СЛАЙДЕРА (КАРУСЕЛИ) В REACT-ПРИЛОЖЕНИЕ

INTRODUCING SLIDER COMPONENT (CAROUSEL) IN REACT APPLICATION

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

В настоящее время можно с уверенностью сказать, что веб-сайт как сущность играет главенствующую роль в передаче информации широкому кругу пользователей. Такие элементы, как автоматически перелистывающиеся страницы полезны при составлении, к примеру, рекламных баннеров. В данной статье будет показан легкий способ внедрения компонента-слайдера (карусели) в проект, написанный на React.JS.

ABSTRACT

Nowadays, it is safe to say that website as an entity plays a major role in the transmission of information to a wide range of users. Such elements as automatically turning pages are useful when creating advertising banners, for example. This article will show you an easy way to implement a slider component (carousel) in a project written in React.JS.

Ключевые слова: web, слайдер, React.JS, HTML, npm.

Keywords: web, slider, React.JS, HTML, npm.

Очень часто в веб-приложении (на веб-сайте) можно увидеть динамически изменяющиеся серии изображений или контейнеров страниц, последовательно информирующие пользователя о некотором наборе значимых для достижения определенной цели действий, либо, попросту, несущие в себе рекламу разного рода продуктов (к примеру, если это интернет-магазин).

В случае использования библиотеки React.JS [1] у нас есть замечательная возможность использовать существующий для этого дела пакет из репозитория npm [2].

Для демонстрации примера использования данного пакета создадим серию шагов регистрации пользователя – в первую очередь нужно установить пакет с помощью команды npm install react-responsive-carousel [3]. Далее, нужно понять, что данная библиотека консолидирует в себе список div-контейнеров в качестве дочерних узлов библиотечного React-компонента <ReactCarousel />. В качестве параметров данного компонента можно передать ряд булевых значений: showArrows (отвечает за отображение кнопок-переключателей страниц), showStatus (отвечает за показ номера доступных страниц), swipeable (отвечает за возможность переключаться между страницами не по кнопкам, а пролистыванием с помощью курсора), emulateTouch (позволяет следить за курсором как за пальцем).

Создадим список, содержащий информацию о шагах процесса регистрации пользователя (рисунок 1). Мы видим, что данный массив содержит 3-и объекта с информацией о заголовке, подзаголовке, элементе управления и изображении на соответствующем этапе регистрации. Данные поля объектов будут использованы при генерации html-элемента далее (рисунок 2) через метод map() массива слайдов. Также при компоновке div-элементов используются собственные CSS-классы (рисунок 3).

Рисунок 1. Шаги процесса регистрации пользователя

Рисунок 2. Отображение шагов процесса регистрации на HTML-узлы

Рисунок 3. Часть CSS-классов DIV-контейнеров

Запустив данную реализацию, можно увидеть результат в виде слайдера-карусели, который можно перелистывать либо по движению курсора мыши, либо по нажатию на кнопки управления снизу. Страницы данного слайдера запоминают свое состояние при перелистывании, поэтому в любой момент можно к ним вернуться. Композицию данных страниц можно увидеть на рисунке 4.

Рисунок 4. Процесс постраничной регистрации пользователя

Таким образом, благодаря использованию вышепредставленного пакета можно достаточно быстрым способом генерировать перелистывающиеся динамические объекты на веб-страницах, с которыми можно взаимодействовать.

Список литературы:

1. React.JS [Электронный ресурс] URL: https://reactjs.org (дата обращения: 03.01.2023).
2. Пакетный менеджер npm [Электронный ресурс] URL: https://www.npmjs.com (дата обращения: 03.01.2023).
3. Пакет react-responsive-carousel [Электронный ресурс] URL: https://www.npmjs.com/package/react-responsive-carousel (дата обращения: 03.01.2023).