Gallery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметры анимации

С помощью свойств animationDuration и animationEasing можно изменить такие параметры анимации смены слайдов, как длительность и функция анимации соответственно. Свойство animationEasing принимает одно из предопределенных значений анимации или позволяет задать пользовательское значение через массив, элементы которого соответствуют параметрам аналогичной CSS-функции cubic-bezier ↗.

Доступность (a11y)

1. Навигация

• По возможности не оставляйте пользователя без возможности навигации по галерее вручную. Не полагайтесь только на автоматическую прокрутку
• Кастомизируйте подписи кнопок: Задавайте понятные метки через свойства:

  arrowPrevLabel = 'Предыдущий слайд';
  arrowNextLabel = 'Следующий слайд';

  Скопировать код

2. Метаданные галереи

Добавьте смысловой ярлык: Используйте aria-label или aria-labelledby с конкретным описанием:

// Плохо
aria-label="Карусель" // роль указывается автоматически через `aria-roledescription="Карусель"`
 
// Хорошо
aria-label="Фотографии нового смартфона"

3. Описание слайдов

Уникальные метки для каждого слайда: Используйте slideLabel с функцией, генерирующей конкретные описания:

// Плохо (нет конкретного обозначения, что на слайде)
slideLabel={({ index, total }) => `Слайд ${index}`}
 
// Хорошо
slideLabel={({ index, total }) => `Техническая схема (${index + 1} из ${total})`}

4. Контент внутри слайдов

Обязательно для изображений: Всегда добавляйте осмысленный alt:

// Плохо (неконкретное описание)
<img src="product.jpg" alt="Картинка" />
 
// Хорошо
<img src="product.jpg" alt="Смартфон на белом фоне с открытой коробкой" />

5. Дополнительные настройки

Кастомизация ролей: При необходимости переопределяйте стандартные описания:

aria-roledescription="Карусель" // Для галереи
slideRoleDescription="Изображение продукта" // Для слайда

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