Carousel
The Carousel component is a responsive and customizable slider for displaying a collection of images, text, or other content. The Slide component represents each individual slide within the carousel. Together, they make it easy to create an engaging and interactive user experience on your website.
)
Importing
_10import { Carousel } from '@ef-global/backpack/Carousel';
Props
| Name | Type | Default | Description |
| controls | boolean | true | Determines whether to display the previous and next buttons. |
| indicators | boolean | true | Determines whether to display the slide indicators. |
| pauseOnHover | boolean | true | Determines whether the carousel should pause when hovered. |
Usage
To use the Carousel component, simply import it and add it to your JSX code. Then, add Slide components as children of the Carousel.
_12<Carousel_12 controls={true}_12 indicators={true}_12 pauseOnHover={true}_12>_12 <Slide>_12 {/* Slide content */}_12 </Slide>_12 <Slide>_12 {/* Slide content */}_12 </Slide>_12</Carousel>
Examples
Variant Minimal
This example demonstrates a minimal Carousel with one slide visible at a time and a gap of 8 px on small screens and 24 px on large screens.
_10<Carousel_10 controls={{ s: false, l: "minimal" }}_10 showPagination={{ s: false, l: true }}_10 slidesInView={1}_10 gap={{ s: 8, l: 24 }}_10>_10 {/* Your TeaserCards go here */}_10</Carousel>
Variant Minimal Inverse
This example demonstrates a minimal Carousel with an inverse color scheme.
_10<Carousel_10 controls={{ s: false, l: "minimal" }}_10 showPagination={{ s: false, l: true }}_10 inverse={true}_10 slidesInView={1}_10 gap={{ s: 8, l: 24 }}_10>_10 {/* Your TeaserCards go here */}_10</Carousel>
Variant Minimal (start at slide 5)
This example demonstrates a minimal Carousel starting at the fifth slide (index 4).
_10<Carousel_10 controls={{ s: false, l: "minimal" }}_10 showPagination={{ s: false, l: true }}_10 startAtIndex={4}_10 slidesInView={1}_10 gap={{ s: 8, l: 24 }}_10>_10 {/* Your TeaserCards go here */}_10</Carousel>
Variant Bold
This example demonstrates a bold Carousel with one slide visible at a time and a gap of 8 units on small screens and 24 units on large screens.
_10<Carousel_10 controls={{ s: false, l: "bold" }}_10 showPagination={true}_10 slidesInView={1}_10 gap={{ s: 8, l: 24 }}_10>_10 {/* Your TeaserCards go here */}_10</Carousel>
Variant Cards
This example demonstrates a Carousel with cards and custom slides in view settings for different screen sizes.
_10<Carousel_10 controls={{ s: false, m: "bold" }}_10 showPagination={true}_10 slidesInView={{ s: 1, m: 3 }}_10 gap={{ s: 8, m: 24 }}_10>_10 {/* Your ContentCards go here */}_10</Carousel>
Variant Minimal Contained
This example demonstrates a minimal contained Carousel with one slide visible at a time and a gap of 8 units on small screens and 24 units on large screens.
_10<Carousel_10 controls={{ s: false, l: "minimal" }}_10 showPagination={{ s: false, l: true }}_10 slidesInView={1}_10 gap={{ s: 8, l: 24 }}_10 layout="contained"_10>_10 {/* Your TeaserCards go here */}_10</Carousel>
Variant Bold Contained
This example demonstrates a bold contained Carousel with one slide visible at a time and a gap of 8 units on small screens and 24 units on large screens.
_10<Carousel_10 controls={{ s: false, l: "bold" }}_10 showPagination={true}_10 slidesInView={1}_10 gap={{ s: 8, l: 24 }}_10 layout="contained"_10>_10 {/* Your TeaserCards go here */}_10</Carousel>
Variant Cards Contained
This example demonstrates a contained Carousel with cards and custom slides in view settings for different screen sizes.
_10<Carousel_10 controls={{ s: false, m: "bold" }}_10 showPagination={true}_10 slidesInView={{ s: 1, m: 3 }}_10 gap={{ s: 8, m: 24 }}_10 layout="contained"_10>_10 {/* Your ContentCards go here */}_10</Carousel>