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	4	Количество видимых слайдов на разрешении 1280 и выше
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
className	string		Дополнительные классы для корневого элемента
classes	{ root?: string; innerIndents?: string; container?: string; containerModifier?: string; prev?: string; next?: string; slide?: string; }		Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; slider?: Record<string, string>; prev?: Record<string, string>; next?: Record<string, string>; slide?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
slidesSettings	SlidesSettingsType		Настройки слайдов
loop	boolean		Смена слайдов с зацикливанием
autoPlay	boolean		Автоматическая прокрутка
pagination	PaginationOptions		Настройки пагинации
autoPlayDelay	number		Задержка для авто прокрутки
transitionSpeed	number		Скорость смены слайдов
threshold	number		Пороговое значение свайпа при котором выполняется сдвиг слайдов в карусели
initialSlide	number		Порядковый номер первого видимого слайда
disableTouchMove	boolean		Отключение смены слайда свайпами
centeredSlides	boolean		Активный слайд по центру экрана
navTheme	NavThemeType		Тема навигации
effectTheme	EffectThemeType		Эффект анимации
noSwipingSelector	string		Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов
slideToClickedSlide	boolean		Свайп к слайду, по которому произведен клик
getSwiper	(instance: Swiper) => void		Ref на swiper
onNextClick	(index: number) => void		Обработчик клика по стрелке вперед (должен быть обернут в useCallback)
onPrevClick	(index: number) => void		Обработчик клика по стрелке назад (должен быть обернут в useCallback)
onChange	(currentIndex: number, previousIndex: number, slidesPerView?: number \| "auto") => void		Обработчик смены слайда (должен быть обернут в useCallback)
gradient	boolean		Наличие градиента по краям контейнера
gradientColor	GradientThemeType		Цвет градиента

Примечание

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