Figma

Banner

import { Banner } from '@megafon/ui-core';
Код DemoSlide
export const DemoSlide = ({ children, background = '#fff' }) => (
    <div
        style={{
            height: '100%',
            backgroundColor: background,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '30px',
        }}
    >
        {children}
    </div>
);

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

<ContentArea>
  <Banner arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
      <DemoSlide background="#10E272">4</DemoSlide>
      <DemoSlide background="#00B956">5</DemoSlide>
  </Banner>
</ContentArea>

Радиус баннера

Прямые углы

<ContentArea>
  <Banner radius="corners" arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
      <DemoSlide background="#10E272">4</DemoSlide>
      <DemoSlide background="#00B956">5</DemoSlide>
  </Banner>
</ContentArea>

Закругленные углы

<ContentArea>
  <Banner arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
      <DemoSlide background="#10E272">4</DemoSlide>
      <DemoSlide background="#00B956">5</DemoSlide>
  </Banner>
</ContentArea>

Цветовая тема стрелок навигации

Белая

<ContentArea>
  <Banner arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

Темная (deprecated)

<ContentArea>
  <Banner arrowTheme="dark">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

Прокрутка

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

<ContentArea>
  <Banner loop arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

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

<ContentArea>
  <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

По умолчанию время прокрутки увеличивается при взаимодействии со слайдером. Данный функционал можно отключить с помощью флага noIncreaseAutoplayDelay.

<ContentArea>
      <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white" noIncreaseAutoplayDelay>
          <DemoSlide background="#00B956">1</DemoSlide>
          <DemoSlide background="#10E272">2</DemoSlide>
          <DemoSlide background="#00B956">3</DemoSlide>
      </Banner>
  </ContentArea>

Пауза прокрутки при наведении курсора на компонент

<ContentArea>
  <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white" pauseOnHover>
      <DemoSlide background="#EDEDED">1</DemoSlide>
      <DemoSlide background="#F6F6F6">2</DemoSlide>
      <DemoSlide background="#EDEDED">3</DemoSlide>
  </Banner>
</ContentArea>

Единственный слайд

Если слайд единственный стрелки и навигация скрываются, автопрокрутка отключается

<ContentArea>
      <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white" pauseOnHover noIncreaseAutoplayDelay>
          <DemoSlide background="#00B956">1</DemoSlide>
      </Banner>
  </ContentArea>

Показать следующий слайд на мобильном разрешении

В данном случае анимация прокрутки слайдов меняется и становится, как в карусели, часть следующего слайда видна

<ContentArea>
      <Banner arrowTheme="white" showNextSlide>
          <DemoSlide background="#EDEDED">1</DemoSlide>
          <DemoSlide background="#F6F6F6">2</DemoSlide>
          <DemoSlide background="#EDEDED">3</DemoSlide>
      </Banner>
  </ContentArea>