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">
          <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>

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