В этой статье мы рассмотрим как сделать бесконечный слайдер на React.js, будет очень интересно и полезно.
Также у нас есть статья где мы делаем бесконечный слайдер на чистом JS, посмотрите по этой ссылке.
Чуть работы слайдера:
Для начала давайте разберём суть работы этого слайда, суть достаточно интересная и многим не зная React может показаться странной.
Суть в том, что у нас будет три блога, предыдущий слайд, следующий, и тот который нужно прямо сейчас выводить.
Мы будем просто внутри их последовательно менять изображения в течение одной секунды, при этом всё это будет с анимацией, всё за счёт атрибута key в изображениях, благодаря ему React будет рендерить с анимацией.
Про атрибут key можете прочитать подробнее по этой ссылке.
Создание бесконечного слайдера на React.js:
Теперь перейдём к самому созданию, слайдера.
CSS:
Для начала рассмотрим CSS, создайте отдельный файл где нибудь, и вот что в нём пишем:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .slider { position: relative; width: 80%; height: 500px; margin: auto; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; } .slider-img { position: absolute; width: 100%; height: 500px; transition: all 0.2s; } .slider-img-prev { transform: translateX(-100%); } .slider-img-next { transform: translateX(100%); } |
Из интересного мы тут добавляем анимацию для переходов transition: all 0.2s, ещё предыдущему и следующему слайду назначаем свойство transform со значениям translateX(-100%) и translateX(100%) соответственно.
То есть мы меняем расположения блогов по оси X, в целом тут больше не чего сложного нет.
JavaScript:
Теперь создадим всю логику, для этого создайте файл «slide.js» в папку «components», и подключите все нужные файлы:
1 2 3 4 5 6 7 | import React, {useState, useEffect} from "react" import slide1 from "../img/slide1.jpg" import slide2 from "../img/slide2.jpg" import slide3 from "../img/slide3.jpg" import slide4 from "../img/slide4.jpg" import slide5 from "../img/slide5.jpg" import "../style/slider.css" |
Как видите мы импортируем хуки React, они нам нужны для работы, картинку для слайда и стили.
Теперь создадим массив где будем хранить изображения виде тегов:
1 2 3 4 5 6 7 | const img = [ <img key={slide1} src={slide1} />, <img key={slide2} src={slide2} />, <img key={slide3} src={slide3} />, <img key={slide4} src={slide4} />, <img key={slide5} src={slide5} />, ] |
Тут всё просто, когда мы импортируем изображение, то мы в итоге получаем путь до него, и мы этот путь используем в img и в качестве значения атрибута key, но можете просто числа проставить.
Дальше создадим функциональный компонент, вот он:
1 2 3 | export function Slider() { ... } |
Вот что внутри него:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Индекс текущего слайда const [activeIndex, setActiveIndex] = useState(0); // Хук Effect useEffect(() => { // Запускаем интервал const interval = setInterval(() => { // Меняем состояние setActiveIndex((current) => { // Вычисляем индекс следующего слайда, который должен вывестись const res = current === img.length - 1 ? 0 : current + 1 // Возвращаем индекс return res }) }, 3000) // Выключаем интервал return () => clearInterval() }, []) // Вычисляем индекс предыдущего слайда const prevImgIndex = activeIndex ? activeIndex - 1 : img.length - 1 // Вычисляем индекс следующего слайда const nextImgIndex = activeIndex === img.length - 1 ? 0 : activeIndex + 1 |
В начале мы создаём состояние индекса текущего слайда, потом в useEffect(), включаем интервал, в котором отчитываем одну секунду и меняем индекс текущего слайда на следующий.
Потом также вычисляем предыдущий слайд и следующий относительно текущего.
Последнее что мы делаем, так это возвращаем рендер нашего слайда:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | return ( <div className="slider"> <div className="slider-img slider-img-prev" key={prevImgIndex}> {img[prevImgIndex]} </div> <div className="slider-img" key={activeIndex}> {img[activeIndex]} </div> <div className="slider-img slider-img-next" key={nextImgIndex}> {img[nextImgIndex]} </div> </div> ) |
Теперь просто этот компонент выводим в там где вам надо, я же выведу в <App/>:
1 2 3 4 5 6 7 8 9 10 11 12 | import './App.css'; import {Slider} from "./components/slider" function App() { return ( <div className="App"> <Slider/> </div> ); } export default App; |
Вот что получилось:
Конечно тут не видно, но оно работает, просто сделаете это и вы увидите.
Ещё можете добавить кнопки и зависимо от клика на кнопки менять слайд и в целом его улучшить, это не так сложно..
Вывод:
В этой статье мы разобрали как сделать бесконечный слайдер на React.js, думаю всем было очень интересно, также тут мы использовали хуки, если вы не умеете с ними работать, то прочитайте статью на эту тему по ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...