Carousel
Свайп, перетаскивание или стрелки. Прилипает к слайдам, показывает край следующего, может зацикливаться и листаться сама — вертикальный свайп всё так же прокручивает страницу.
зависимости 0файлы tsx + cssпараметры 8react 18+
X 0000 Y 0000↳ Тяните, свайпайте или жмите ← →
Пульт08 параметров
01perView
Слайдов на экране; дробное число показывает край следующего.
02gap
px
Расстояние между слайдами.
03loop
С последнего слайда — на первый.
04autoplay
ms
Листать каждые N мс; 0 — выключено.
05duration
ms
Время смены слайда.
06arrows
Кнопки «назад» и «вперёд».
07dots
Точки-индикаторы.
08accentColor
Активная точка и наведение на стрелки.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
perView | number | 1.15 | Слайдов на экране; дробное число показывает край следующего. |
gap | number | 16 | Расстояние между слайдами. |
loop | boolean | false | С последнего слайда — на первый. |
autoplay | number | 0 | Листать каждые N мс; 0 — выключено. |
duration | number | 500 | Время смены слайда. |
arrows | boolean | true | Кнопки «назад» и «вперёд». |
dots | boolean | true | Точки-индикаторы. |
accentColor | string | "#b6e24c" | Активная точка и наведение на стрелки. |
slides | ReactNode[] | — | Что угодно: картинки, карточки, видео. |
onChange | (index: number) => void | — | Вызывается при смене слайда. |
labels | { previous?, next?, slide?, goTo? } | — | Текст стрелок, точек и слайдов для скринридеров. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |