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>