Введение
AccordionBadgesBannerButtonCalendarCaptionCarouselCheckboxContentAreaCounterGridHeaderLinkListNotificationPaginationParagraphPreloaderRadioButtonSearchSelectSwitcherTabsTextFieldTextLinkTileTooltip
AccordionBoxAudioPlayerBannerBoxBenefitsIconsBenefitsPicturesBreadcrumbsButtonBannerButtonLinkBoxCardCardsBoxCarouselBoxContainerDownloadLinksFaqWrapperInstructionsPageTitlePartnersPictureWithDescriptionPropertyStepsStoreBannerTableTabsBoxTextBoxTextWithIconTitleDescriptionBoxVideoBannerVideoBlock
ИконкиЦвета

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

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

1
2
3
4
5
6

Зеленый фон

1
2
3
4
5
6
Код blockStyle
const blockStyle = { padding: '20px 0' };

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

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

6
1
2
3
4
5
6
1

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

6
1
2
3
4
5
6
1

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

1
2
3
4
5
6

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

6
1
2
3
4
5
6
1

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

1
2
3
4
5
6

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

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

1
2
3
4

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

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

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

111111
22222222
33333333333
444444
555555555555555555
66
7777777777777
888888888888
9

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

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

1
2
3
4
5
6

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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

6
1
2
3
4
5
6
1

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

6
1
2
3
4
5
6
1