🎵 Slidin' my way downtown 🎵
We use Embla-Carousel to help create our Slider component. Their excellent hooks and customization options make for a wonderful DX.
This component works right out of the box, thanks to a bunch of functionality hidden away in our
custom useCarousel hook. You will rarely, if ever, need to edit that file but we recommend familiarizing yourself
with the various functions anyways.
We've taken great care to make this component fully customizable so we strongly recommend that you never edit this file directly.
Rather, import it into a new file and customize from there using the following props:
Slides - you can pass an array of components (typically a card) to populate the slides. Common use cases are Testimonials, Partners and Team Members.
You also have the option to pass children directly.
Config - want to enable looping, auto-height or change the slider speed? Pass that object of values here.
CSS - Any CSS passed here will apply to the main Slider component itself, but you can specifically target theslides or slide
CSS by passing in those keys with their own object of styles:
const SliderCss = {
maxWidth: '90%',
slides: {
justifyContent: 'flex-end',
},
slide: {
f: '0 0 25%',
},
};
Pagination - Defaults to false. If true, we get nice little pagination dots that indicate what slide you're on. You can customize this further in SlidePagination.js.
Navigation - Defaults to true. This renders clickable slider arrows. Further customization can be done in SliderNav.js.