Carousel

export interface CarouselNewProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Номер слайда.
     * Controlled-режим.
     */
    index?: number;
    /**
     * Callback для изменения слайда;
     */
    onChangeIndex?: (index: number) => void;
    /**
     * Номер слайда по-умолчанию.
     * Только при uncontrolled-режиме.
     * @default 0
     */
    defaultIndex?: number;
    /**
     * Центрирование активного элемента при скролле.
     * @default start
     */
    scrollAlign?: ScrollAlign;
    /**
     * Опции управления пагинацией.
     */
    paginationOptions?: {
        /**
         * Включение/выключение пагинации.
         * @default false
         */
        disabled?: boolean;
        /**
         * Количество видимых точек пагинации.
         * @default 10
         */
        visibleDots?: number;
        /**
         * Центрирование активной точки.
         * @default false
         */
        centered?: boolean;
    };
    /**
     * Включение/выключение стрелок управления слайдами.
     * @default false
     */
    controlArrowsDisabled?: boolean;
    /**
     * Отступ между слайдами.
     * @default 20px
     */
    gap?: CSSProperties['gap'];
    /**
     * Зацикливание карусели.
     * При включении после последнего слайда идет первый, и наоборот.
     * @default false
     */
    loop?: boolean;
    /**
     * Автоматическое пролистывание карусели.
     * @default false
     */
    autoPlay?: boolean;
    /**
     * Интервал автоматического пролистывания в мс.
     * @default 5000
     */
    autoPlayInterval?: number;
    /**
     * Включение свайпа/drag для touch- и pointer-устройств.
     * @default false
     */
    swipeEnabled?: boolean;
    /**
     * Включение виртуализации слайдов.
     * @default false
     */
    virtual?: boolean;

    /**
     * Размер контрола.
     */
    size?: string;
    /**
     * Вид контрола.
     * @default default
     */
    view?: string;
}

Использование

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

Для простого сценария достаточно передать элементы в children. Если нужно задать стартовый слайд один раз при инициализации, используйте defaultIndex. Если индексом нужно управлять снаружи, переключайте компонент в controlled-режим через index и onChangeIndex.

Для мобильных сценариев имеет смысл включать swipeEnabled, а если внешние кнопки навигации не нужны, можно скрыть встроенные стрелки через controlArrowsDisabled.