Carousel

import { Carousel } from '@megafon/ui-core';

Примеры и код

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

Особенности использования на мобильных разрешениях

На разрешении меньше 1024 отключаются стрелки и появляются "уши", для корректного отображения которых необходимо предоставить компоненту возможность растянуться на всю страницу. По умолчанию компонент растягивается на всю страницу за счет отрицательных margin на величину гайдовых контентных отступов (32px на 320-767 и 48px на 768-1023) и компенсируется с помощью padding, чтобы основные видимые слайды выравнивались по контенту страницы. Если на площадке используются негайдовые контентные отступы, то нужно их переопределить с помощью дополнительного класса, который передается через свойство innerIndentsClass.

.custom-indents-class {
    padding-left: 50px;
    padding-right: 50px;
    margin-left: -50px;
    margin-right: -50px;
}

Код DemoSlideexport const DemoSlide = ({ children, background }) => {
    return (
        <div
            style={{
                height: '200px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                textAlign: 'center',
                fontSize: '30px',
                padding: '10px',
            }}
        >
            {children}
        </div>
    );
};

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

Показать код

<ContentArea>
  <Carousel>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Зеленый фон

Показать код

<ContentArea outerBackgroundColor="green">
  <div style={blockStyle}>
      <Carousel navTheme="green" arrowTheme='white'>
          <DemoSlide onColoredBackground>1</DemoSlide>
          <DemoSlide onColoredBackground>2</DemoSlide>
          <DemoSlide onColoredBackground>3</DemoSlide>
          <DemoSlide onColoredBackground>4</DemoSlide>
          <DemoSlide onColoredBackground>5</DemoSlide>
          <DemoSlide onColoredBackground>6</DemoSlide>
      </Carousel>
  </div>
</ContentArea>

Код blockStyleconst blockStyle = { padding: '20px 0' };

Прокрутка слайдов

С зацикливанием

Показать код

<ContentArea>
  <Carousel loop>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Автоматическая

Показать код

<ContentArea>
  <Carousel loop autoPlay>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Скорость прокручивания

Показать код

<ContentArea>
  <Carousel transitionSpeed={1000}>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Активный слайд по центру карусели

Показать код

<ContentArea>
  <Carousel loop centeredSlides>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Без прокручивания свайпом

Показать код

<ContentArea>
  <Carousel disableTouchMove>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Без прокрутки

Отсутствует навигация и функционал прокручивания при недостаточном количестве слайдов.

Показать код

<ContentArea>
  <Carousel>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
  </Carousel>
</ContentArea>

Настройки слайдов

Ширина слайдов по ширине их контента

Задано расстояние между слайдами в px, количество видимых слайдов рассчитывается автоматически.

Показать код

<ContentArea>
  <Carousel
      slidesSettings={{
          0: { slidesPerView: 'auto', spaceBetween: 16 },
          768: { slidesPerView: 'auto', spaceBetween: 20 },
      }}
  >
      <DemoSlide>111111</DemoSlide>
      <DemoSlide>22222222</DemoSlide>
      <DemoSlide>33333333333</DemoSlide>
      <DemoSlide>444444</DemoSlide>
      <DemoSlide>555555555555555555</DemoSlide>
      <DemoSlide>66</DemoSlide>
      <DemoSlide>7777777777777</DemoSlide>
      <DemoSlide>888888888888</DemoSlide>
      <DemoSlide>9</DemoSlide>
  </Carousel>
</ContentArea>

Переопределение количества видимых слайдов

Количество видимых слайдов меняется в зависимости от расширения экрана.

Показать код

<ContentArea>
  <Carousel
      slidesSettings={{
          0: { slidesPerView: 1, spaceBetween: 16 },
          768: { slidesPerView: 2, spaceBetween: 20 },
          1280: { slidesPerView: 5, spaceBetween: 20 },
      }}
  >
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
  </Carousel>
</ContentArea>

Переопределение количества прокручеваемых слайдов

Количество переключаемых за 1 раз слайдов меняется в зависимости от расширения экрана.

Показать код

<ContentArea>
  <Carousel
      slidesSettings={{
          0: { slidesPerView: 1, spaceBetween: 16 },
          768: { slidesPerView: 2, slidesPerGroup: 2, spaceBetween: 20 },
          1280: { slidesPerView: 3, slidesPerGroup: 3, spaceBetween: 20 },
      }}
  >
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
      <DemoSlide>6</DemoSlide>
      <DemoSlide>7</DemoSlide>
      <DemoSlide>8</DemoSlide>
      <DemoSlide>9</DemoSlide>
      <DemoSlide>10</DemoSlide>
      <DemoSlide>11</DemoSlide>
      <DemoSlide>12</DemoSlide>
  </Carousel>
</ContentArea>

Наличие градиента по краям контейнера

Показать код

<ContentArea>
  <div style={blockStyle}>
      <Carousel gradient centeredSlides loop>
          <DemoSlide>1</DemoSlide>
          <DemoSlide>2</DemoSlide>
          <DemoSlide>3</DemoSlide>
          <DemoSlide>4</DemoSlide>
          <DemoSlide>5</DemoSlide>
          <DemoSlide>6</DemoSlide>
      </Carousel>
  </div>
</ContentArea>

Цвет фона должен совпадать с цветом градиента

Показать код

<ContentArea outerBackgroundColor="green">
  <div style={blockStyle}>
      <Carousel navTheme="green" gradient gradientColor="green" centeredSlides loop>
          <DemoSlide onColoredBackground>1</DemoSlide>
          <DemoSlide onColoredBackground>2</DemoSlide>
          <DemoSlide onColoredBackground>3</DemoSlide>
          <DemoSlide onColoredBackground>4</DemoSlide>
          <DemoSlide onColoredBackground>5</DemoSlide>
          <DemoSlide onColoredBackground>6</DemoSlide>
      </Carousel>
  </div>
</ContentArea>

Отключение переключения слайдов при фокусе на дочерних элементах

Пропс disableChildFocusPropagation предотвращает нежелательное переключение слайдов при фокусе на внутренних элементах (при программном захвате фокуса).

Код DemoButtonconst DemoButton: React.FC = () => {
    const [isFocused, setIsFocused] = React.useState(false);
    const buttonRef = useRef<HTMLButtonElement>(null);

    const handleClick = () => {
        buttonRef.current?.focus();
        setIsFocused(true);
    };

    const handleFocus = () => {
        setIsFocused(true);
    };

    const handleBlur = () => {
        setIsFocused(false);
    };

    return (
        <Button
            buttonRef={buttonRef}
            onClick={handleClick}
            onFocus={handleFocus}
            onBlur={handleBlur}
            type={isFocused ? 'primary' : 'outline'}
        >
            {isFocused ? 'focused' : 'click'}
        </Button>
    );
};

Показать код

<ContentArea>
  <div style={blockStyle}>
      <Carousel disableChildFocusPropagation>
          <DemoSlide><DemoButton /></DemoSlide>
          <DemoSlide><DemoButton /></DemoSlide>
          <DemoSlide><DemoButton /></DemoSlide>
          <DemoSlide><DemoButton /></DemoSlide>
          <DemoSlide><DemoButton /></DemoSlide>
          <DemoSlide><DemoButton /></DemoSlide>
      </Carousel>
  </div>
</ContentArea>

Prop name	Type	Default	Description
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
className	string \| undefined		Дополнительные классы для корневого элемента
classes	{ root?: string \| undefined; innerIndents?: string \| undefined; container?: string \| undefined; containerModifier?: string \| undefined; prev?: string \| undefined; next?: string \| undefined; slide?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; slider?: Record<string, string> \| undefined; prev?: Record<string, string> \| undefined; next?: Record<string, string> \| undefined; slide?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
slidesSettings	SlidesSettingsType \| undefined	{ [breakpoints.MOBILE_SMALL_START]: { slidesPerView: 1, spaceBetween: 16, }, [breakpoints.MOBILE_BIG_START]: { slidesPerView: 3, spaceBetween: 20, }, [breakpoints.DESKTOP_MIDDLE_START]: { slidesPerView: 4, spaceBetween: 20, }, }	Настройки слайдов
loop	boolean \| undefined	false	Смена слайдов с зацикливанием
autoPlay	boolean \| undefined	false	Автоматическая прокрутка
pagination	PaginationOptions \| undefined		Настройки пагинации
autoPlayDelay	number \| undefined	5000	Задержка для авто прокрутки
transitionSpeed	number \| undefined	300	Скорость смены слайдов
threshold	number \| undefined		Пороговое значение свайпа при котором выполняется сдвиг слайдов в карусели
initialSlide	number \| undefined	1	Порядковый номер первого видимого слайда
disableTouchMove	boolean \| undefined	false	Отключение смены слайда свайпами
centeredSlides	boolean \| undefined	false	Активный слайд по центру экрана
navTheme	NavThemeType \| undefined	light	Тема навигации
effectTheme	EffectThemeType \| undefined	slide	Эффект анимации
disableArrows	boolean \| undefined	false	Отключение стрелок
arrowTheme	ThemeType \| undefined	purple	Тема стрелок
noSwipingSelector	string \| undefined		Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов
slideToClickedSlide	boolean \| undefined	false	Свайп к слайду, по которому произведен клик
getSwiper	((instance: Swiper) => void) \| undefined		Ref на swiper
onNextClick	((index: number) => void) \| undefined		Обработчик клика по стрелке вперед (должен быть обернут в useCallback)
onPrevClick	((index: number) => void) \| undefined		Обработчик клика по стрелке назад (должен быть обернут в useCallback)
onChange	((currentIndex: number, previousIndex: number, slidesPerView?: number \| "auto" \| undefined) => void) \| undefined		Обработчик смены слайда (должен быть обернут в useCallback)
gradient	boolean \| undefined	false	Наличие градиента по краям контейнера
gradientColor	GradientThemeType \| undefined	default	Цвет градиента
disableChildFocusPropagation	boolean \| undefined	false	Отключить переключение слайдов при фокусе на дочерних элементах