CarouselBox

import { CarouselBox } from '@megafon/ui-shared';

Примеры и код

Свойства и методы

Код DemoSlideexport const DemoSlide = ({ children }) => {
    return (
        <Tile isInteractive shadowLevel="default" radius="rounded">
            <div
                style={{
                    height: '200px',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    textAlign: 'center',
                    fontSize: '30px',
                    padding: '10px',
                }}
            >
                {children}
            </div>
        </Tile>
    );
};

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

<CarouselBox>
  <DemoSlide>1</DemoSlide>
  <DemoSlide>2</DemoSlide>
  <DemoSlide>3</DemoSlide>
  <DemoSlide>4</DemoSlide>
  <DemoSlide>5</DemoSlide>
</CarouselBox>

3 видимых слайда на разрешении 1280 и выше

<CarouselBox desktopSlidesPerView={3}>
  <DemoSlide>1</DemoSlide>
  <DemoSlide>2</DemoSlide>
  <DemoSlide>3</DemoSlide>
  <DemoSlide>4</DemoSlide>
  <DemoSlide>5</DemoSlide>
</CarouselBox>

Prop name	Type	Default	Description
desktopSlidesPerView	DesktopSlidesPerView \| undefined	4	Количество видимых слайдов на разрешении 1280 и выше
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		Настройки слайдов
loop	boolean \| undefined		Смена слайдов с зацикливанием
autoPlay	boolean \| undefined		Автоматическая прокрутка
pagination	PaginationOptions \| undefined		Настройки пагинации
autoPlayDelay	number \| undefined		Задержка для авто прокрутки
transitionSpeed	number \| undefined		Скорость смены слайдов
threshold	number \| undefined		Пороговое значение свайпа при котором выполняется сдвиг слайдов в карусели
initialSlide	number \| undefined		Порядковый номер первого видимого слайда
disableTouchMove	boolean \| undefined		Отключение смены слайда свайпами
centeredSlides	boolean \| undefined		Активный слайд по центру экрана
navTheme	NavThemeType \| undefined		Тема навигации
effectTheme	EffectThemeType \| undefined		Эффект анимации
disableArrows	boolean \| undefined		Отключение стрелок
arrowTheme	ThemeType \| undefined		Тема стрелок
noSwipingSelector	string \| undefined		Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов
slideToClickedSlide	boolean \| undefined		Свайп к слайду, по которому произведен клик
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		Наличие градиента по краям контейнера
gradientColor	GradientThemeType \| undefined		Цвет градиента

Примечание

Компонент CarouselBox является оберткой над компонентом Carousel из раздела Компоненты и имеет идентичные свойства и методы