Бесконечный слайдер на React.js

Метки: / /

В этой статье мы рассмотрим как сделать бесконечный слайдер на React.js, будет очень интересно и полезно.

Также у нас есть статья где мы делаем бесконечный слайдер на чистом JS, посмотрите по этой ссылке.

Чуть работы слайдера:

Для начала давайте разберём суть работы этого слайда, суть достаточно интересная и многим не зная React может показаться странной.

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

Мы будем просто внутри их последовательно менять изображения в течение одной секунды, при этом всё это будет с анимацией, всё за счёт атрибута key в изображениях, благодаря ему React будет рендерить с анимацией.

Про атрибут key можете прочитать подробнее по этой ссылке.

Создание бесконечного слайдера на React.js:

Теперь перейдём к самому созданию, слайдера.

CSS:

Для начала рассмотрим CSS, создайте отдельный файл где нибудь, и вот что в нём пишем:

Из интересного мы тут добавляем анимацию для переходов transition: all 0.2s, ещё предыдущему и следующему слайду назначаем свойство transform со значениям translateX(-100%) и translateX(100%) соответственно.

То есть мы меняем расположения блогов по оси X, в целом тут больше не чего сложного нет.

JavaScript:

Теперь создадим всю логику, для этого создайте файл «slide.js» в папку «components», и подключите все нужные файлы:

Как видите мы импортируем хуки React, они нам нужны для работы, картинку для слайда  и стили.

Теперь создадим массив где будем хранить изображения виде тегов:

Тут всё просто, когда мы импортируем изображение, то мы в итоге получаем путь до него, и мы этот путь используем в img и в качестве значения атрибута key, но можете просто числа проставить.

Дальше создадим функциональный компонент, вот он:

Вот что внутри него:

В начале мы создаём состояние индекса текущего слайда, потом в useEffect(), включаем интервал, в котором отчитываем одну секунду и меняем индекс текущего слайда на следующий.

Потом также вычисляем предыдущий слайд и следующий относительно текущего.

Последнее что мы делаем, так это возвращаем рендер нашего слайда:

Теперь просто этот компонент выводим в там где вам надо, я же выведу в <App/>:

Вот что получилось:

Рабочий слайдер на React.js

Конечно тут не видно, но оно работает, просто сделаете это и вы увидите.

Ещё можете добавить кнопки и зависимо от клика на кнопки менять слайд и в целом его улучшить, это не так сложно..

Вывод:

В этой статье мы разобрали как сделать бесконечный слайдер на React.js, думаю всем было очень интересно, также тут мы использовали хуки, если вы не умеете с ними работать, то прочитайте статью на эту тему по ссылке.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x