Исходник ↗Песочница ↗

Gallery

Компонент для создания адаптивного слайдера изображений с поддержкой жестов и автоматической прокрутки.

Загружается...

Автопрокрутка

Компонент поддерживает автопрокрутку слайдов. Для этого нужно использовать свойство timeout (в миллисекундах) отличное от нуля.

Загружается...

Зацикленная галерея

Используйте свойство looped, чтобы список слайдов прокручивался зацикленно.

Загружается...

Кастомизация стрелок навигации

Для кастомизации стрелок навигации используйте следующие свойства:

  • arrowSize - контролирует размер стрелки;
  • arrowAreaHeight - размер активной зоны стрелок. Определяет область вокруг стрелок, реагирующую на взаимодействие пользователя:
    • stretch - на всю высоту галереи
    • fit - фиксированная высота
  • showArrows - флаг, определяющий нужно ли показывать стрелки. Видимость стрелок также зависит от параметра адаптивности hasPointer. Например, на мобильных устройствах стрелки отображаться никогда не будут.
Загружается...

Индикатор прогресса

Для более удобного использования компонента можно включить индикатор прогресса с помощью свойства bullets:

  • false - значение по умолчанию, индикатор скрыт;
  • light - включает отображение в светлом варианте;
  • dark - включает отображение в светлом варианте.
Загружается...

Контролируемое состояние

Используйте slideIndex и onChange для ручного управления состоянием.

Загружается...

Слайды разных размеров

Если необходимо сделать так, чтобы у каждого слайда была своя ширина, необходимо задать свойство slideWidth="custom":

Загружается...

Свойства и методы

СвойствоОписание
alignAlignType
По умолчанию: -
arrowAreaHeight"stretch" | "fit"

Размер активной зоны стрелок (в пикселях). Определяет область вокруг стрелок, реагирующую на взаимодействие пользователя. В дизайне свойство называется arrowArea.

По умолчанию: -
arrowNextLabelstring

Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий.

По умолчанию: -
arrowPrevLabelstring

Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий.

По умолчанию: -
arrowSize"s" | "m"
По умолчанию: -
bulletsfalse | "dark" | "light"
По умолчанию: -
bulletTestId((index: number, active: boolean) => string)

Передает атрибут data-testid для bullets.

По умолчанию: -
dragDisabledboolean

Позволяет отключить реагирование на тач-события.

По умолчанию: -
getRefRef<HTMLElement>
По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
hasPointerboolean
По умолчанию: -
initialSlideIndexnumber

Индекс слайда по умолчанию.

По умолчанию: 0
loopedboolean

Включает зацикленность слайдов.

По умолчанию: -
nextArrowTestIdstring

Передает атрибут data-testid для кнопки перехода к следующему слайду.

По умолчанию: -
onChange((current: number) => void)
По умолчанию: -
onDragEnd((e: CustomTouchEvent, targetIndex: number) => void)
По умолчанию: -
onDragStartCustomTouchEventHandler
По умолчанию: -
onNextClick((event: MouseEvent<Element, MouseEvent>) => void)

Будет вызвано при нажатии на кнопку-стрелку вправо.

По умолчанию: -
onPrevClick((event: MouseEvent<Element, MouseEvent>) => void)

Будет вызвано при нажатии на кнопку-стрелку влево.

По умолчанию: -
prevArrowTestIdstring

Передает атрибут data-testid для кнопки перехода к предыдущему слайду.

По умолчанию: -
resizeSource"window" | "element"

Тип источника для отслеживания размера:

  • window: пересчет позиции слайдов будет происходить при изменении размеров window
  • element: пересчет позиции слайдов будет происходить при изменении размеров компонента.
По умолчанию: -
showArrowsboolean
По умолчанию: -
slideIndexnumber
По умолчанию: -
slideTestId((index: number) => string)

Передает атрибут data-testid для слайда.

По умолчанию: -
slideWidthnumber | LiteralUnion<"custom", string>

Размер слайда.

Значение "custom" используется, если ширина у слайдов разная.

По умолчанию: -
timeoutnumber

При передаче происходит автоматический переход к следующему слайду через переданное время в ms.

По умолчанию: 0
Предыдущая
Chip
Следующая
GridAvatar