Как создать CAROUSEL/СЛАЙДЕР на ReactJS с нуля

[@РоманНарожнов]

Огонь!!! Дикция, изложение сути, наглядность +100500 баллов)

[@d_matern]

Спасибо!

[@АнжеликаЧегринец]

Спасибо за видео! Очень понятная подача и реализация!

[@veronikamalyshkova928]

Спасибо! Очень помогло! 🙏

[@denmccormik7654]

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

[@dogober3861]

Не понял по поводу параметра currentOffset?, где он объявляется ?

[@NeoCoding]

спасибо за труд

[@ПавелКуприянов-ь8ы]

Класс, спасибо! Смотрю уже ночью, не могу сообразить, а как зациклить слайдер

[@GameForYouOnline]

не могу понять, у меня только отрисовались данные, когда вместо {props} написал {props.children}...почему так?

[@nataliaortega9595]

как сделать const PAGE_WIDTH для кроссбраузерная верстки? чтобы размер менялся при изменении устройства. Сейчас получается фиксированный размер, но хочется сделать более пластичным.

[@ArtemMindsurfer]

а вот что делать чтобы плавно менялась картинка и чтобы можно было свайпать пальцем?

[@tanyab3325]

как установить компаненту карусель? С помощью какой команды?

[@user-cs7ex6vx9u]

Спасибо 🥳

[@thewat4er]

Лучший

[@SerhiiNesterov]

Спасибо

[@skyTechVektor]

Ну что если надо что бы было видно 3 слайда . Я даю тогда offset = ширина одного слайда + margin right
Не знаю правильно ли делаю. Вроже работает

[@RailGainetdinov]

Можно название данной цветовой схемы для VS Code?

[@МаксимВладимирович-я7ю]

чет я не понял, откуда currentOffset берется?

[@DevMagazineChannel]

currentOffset - это просто локальная переменная, ее можно назвать как угодно.
в этой конструкции мы меняем состояние
setOffset((currentOffset) => { /* ... */ })
это еще один вариант изменения состояния:
* можно так: setOffset(100)
* а можно так: setOffset((currentOffset) => currentOffset + 100) // если нужно вычислить новое значение на основе текущего значения состояния

[@homo.errantium]

@@DevMagazineChannel я может что-то упустил, но значение currentOffset откуда берётся в видео? Понятно, что это локальная переменная, но она на момент срабатывания функии не определена, т.е. NaN

[@AirdropLuck]

Скажите, вы проводите платные консультации\ тестовые собеседования для junior js
eact разработчиков?

[@oygemor]

Зачем тебе платные собеседования. Сходи на реальные - от тебя ничего не убудет, а опыта только прибудет :)

[@DevMagazineChannel]

Пока не думал об этом... Но идея хорошая

[@ant3413]

не советую платные курсы,все есть бесплатно в интернете,а все эти курсы лохотрон имхо

[@kapitolyp]

Хорошо, но это элементарно, не хватает самого сложного, реализации, чтобы после третьего слайда шел снова первый, и не через сдвиг обратно влево, показывая второй слайд, а "бесконечный слайдер". Очень бы хотелось вторую часть.

[@DevMagazineChannel]

Спасибо! полезная фича, про "бесконечный слайдер" тоже планирую записать

[@googlechei]

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

[@DevMagazineChannel]

Думаю, что на целый плейлист наберется) Буду постепенно внедрять фичи и записывать

[@hackerpetrovi436]

а в чем сложность то?

[@daniil__kryuchkov]

1. в левую кнопку добавь if (newOffset > 0) newOffset = -1350
2. в правую кнопку добавь if (newOffset < -1350) newOffset = 0
3. const newOffset смени на let newOffset
готово

[@alexanderrevan4478]

Как такой слайдер сделать адаптивным?

[@andrewlevitsky6270]

В медиастилях меняй ширину экрана вывода слайдера, вот и все

[@ЕвгенийЖ-н6м]

Лучше делать на относительных единицах измерения

[@ViKiNG_89]

Как можно типизировать этот участок с помощью TS ?
буду благодарен за подсказку ))
useEffect(() => {
setPages(
Children.map(children, child => {
return cloneElement(child, {
style: {
height: '100%',
minWidth: `${PAGE_WIDTH}px`,
maxWidth: `${PAGE_WIDTH}px`,
},
});
})
);
}, []);

[@saveliy4417]

тут не надо типизировать, может кому понадобиться код с типизацией
import s from './Slider.module.scss'
import {
Children,
cloneElement,
ReactElement,
useEffect,
useState
} from 'react'
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'
interface CarouselProps {
children: ReactElement[]
}
export const Carousel = ({ children }: CarouselProps) => {
const [pages, setPages] = useState([])
const [offset, setOffset] = useState(0)
const PAGE_WIDTH = 720
const handleLeftArrowClick = () => {
setOffset(current => {
const newOffset = current + PAGE_WIDTH
return Math.min(newOffset, 0)
})
}
const handleRightArrowClick = () => {
setOffset(current => {
const newOffset = current - PAGE_WIDTH
const maxOffset = -(PAGE_WIDTH * (pages?.length - 1))
return Math.max(newOffset, maxOffset)
})
}
useEffect(() => {
setPages(
Children.map(children, child => {
return cloneElement(child, {
style: {
height: '100%',
minWidth: `${PAGE_WIDTH}px`,
maxWidth: `${PAGE_WIDTH}px`
}
})
})
)
}, [])
return (






{pages}






)
}

[@eroskaeroska6921]

Это - слайдер, спасибо за код, но это не carousel.

[@DevMagazineChannel]

потому что carousel должен быть зацикленным?

[@Alon794]

автор не шарит походу - так слайдеры не делаются.

[@kerto9364]

а как делаются?