The carousel is a wrapper component that contains multiple slides, which can be other components (e.g. Banners), images, or fully custom content.
Example
function Example() {
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />
];
return (
<Carousel slides={slides} />
);
}
Usage Rules
Do:
- Always have at least one of the two navigation elements for the carousel.
Don't:
- Hide both Navigation and Pagination of the Carousel.
Variants
AutoPlay
The Carousel autoplay will be activated by adding autoplay object with a delay prop in settings as below.
The autoplay can be disabled on interactions by adding disableOnInteraction: true in autoplay object.
function Example() {
const settings = {
slidesPerView: 3,
spaceBetween: 16,
autoplay: {
delay: 3000,
disableOnInteraction: true
}
};
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />,
<Banner title="Four" description="Banner description" />,
<Banner title="Five" description="Banner description" />,
<Banner title="Six" description="Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Center mode
The Carousel center mode can be activated by adding centeredSlides: true in settings.
function Example() {
const settings = {
centeredSlides: true,
slidesPerView: 'auto',
};
const slides = [
<Banner title="One" description="Some long text content to get more space for Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description text" />,
<Banner title="Four" description="Some long text content to get more space for Banner description" />,
<Banner title="Five" description="Banner description" />,
<Banner title="Six" description="Some long text content to get more space for Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Dynamic Width
You need to add slidesPerView: 'auto' to the settings to have auto width style in carousel.
function Example() {
const settings = {
slidesPerView: 'auto',
spaceBetween: 30,
hasNavigation: true,
hasPagination: true
};
const slides = [
<Banner title="One" description="Some long text content to get more space for carousel auto width style example" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description with some more text which gets more space" />,
<Banner title="Four" description="Some long text content to get more space for carousel auto width style example" />,
<Banner title="Five" description="Banner description with more text" />,
<Banner title="Six" description="Some long text content to get more space for carousel auto width style example" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Infinite Loop
The Carousel infinite loop mode can be activated by adding loop: true in settings.
function Example() {
const settings = {
loop: true
};
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />,
<Banner title="Four" description="Banner description" />,
<Banner title="Five" description="Banner description" />,
<Banner title="Six" description="Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Infinite Loop with slides per group
The Carousel infinite loop with slides per group can be customized using slidesPerGroup and loopFillGroupWithBlank in settings.
function Example() {
const settings = {
slidesPerView: 3,
slidesPerGroup: 3,
spaceBetween: 16,
loop: true,
loopFillGroupWithBlank: true
};
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />,
<Banner title="Four" description="Banner description" />,
<Banner title="Five" description="Banner description" />,
<Banner title="Six" description="Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Multi Slides
The Carousel can be multi slides by adding slidesPerView in settings.
function Example() {
const settings = {
slidesPerView: 3,
spaceBetween: 16,
hasNavigation: true,
hasPagination: true
};
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />,
<Banner title="Four" description="Banner description" />,
<Banner title="Five" description="Banner description" />,
<Banner title="Six" description="Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Navigation
Carousel navigation is optional and can be controlled with hasNavigation prop.
function Example() {
const settings = {
hasNavigation: false
};
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Carousel pagination is optional and can be controlled with hasPagination prop.
function Example() {
const settings = {
hasPagination: false
};
const slides = [
<Banner title="One" description="Banner description" />,
<Banner title="Two" description="Banner description" />,
<Banner title="Three" description="Banner description" />
];
return (
<Carousel settings={settings} slides={slides}/>
);
}
Props
|
slides * The slides array | | — |
settings The carousel settings | | "{
spaceBetween: 16
}" |
onSlideChange Event will be fired when currently active slide is changed | ((swiper: Swiper) => void)
| — |
onReachBeginning Event will be fired when Carousel reaches its beginning (initial position) | ((swiper: Swiper) => void)
| — |
onReachEnd Event will be fired when Carousel reaches last slide | ((swiper: Swiper) => void)
| — |
css Add custom styles to this component. Use with caution. Learn more here: Link | | — |
inputFieldCss | | — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence | | — |
| * - the prop is required. |