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>

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	Цвет градиента