Embla based carousel component
After installation import package styles at the root of your application:
Have you followed the installation instructions above but something is not working (Carousel slides are rendered vertically, no controls or indicators)? You've fallen into the trap of not importing carousel styles! To fix the issue, import carousel styles at the root of your application:
The demos presented on this page use blue background color for demonstration purposes. To simplify demo code, background color and other demo-only styles are not included in the demo code. When you copy and paste demo code to your project, it will not have blue background color.
@mantine/carousel package is based on embla carousel :
You can pass configuration options directly to embla carousel with the emblaOptions prop. You can find embla options description in the embla options reference .
Example of passing loop , dragFree and align options:
Set slideSize and slideGap on the Carousel component to control the size and gap of every slide:
slideSize and slideGap props work the same way as style props , you can pass an object with values for different breakpoints:
To use container queries instead of media queries, set type="container" . With container queries, slide size and gap will be adjusted based on the container width, not the viewport width.
Note that when using container queries, slideSize and slideGap props cannot reference theme.breakpoints values in keys. You are required to use exact px or em values.
To see how the slide size and gap changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo:
dragFree will disable slide snap points – users will be able to stop dragging at any position:
A carousel with orientation="vertical" requires the height prop to be set:
You can replace default next/previous controls icons with any React nodes:
Set height="100%" to make the Carousel take 100% height of the container. Note that in this case:
You can get the embla instance with the getEmblaApi prop. You will be able to enhance the carousel with additional logic after that using embla api methods:
Set the plugins prop to enhance the carousel with embla plugins . Note that plugins are not installed with the @mantine/carousel package and you will need to install them separately.
Example with autoplay plugin :
Carousel supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
Set aria-label or aria-labelledby on the Carousel component to make it accessible for screen readers:
Set aria-label for next/previous controls with nextControlProps and previousControlProps props: