Carousel
Embla based carousel component
Source
Docs
Package
License
Installation
After installation import package styles at the root of your application:
Do not forget to import styles
Followed 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:
Documentation demos
Demos presents on this page use blue background color for demonstration purposes. To simply demos code, background color and other demo-only styles are not included in the demo code. When you copy paste demo code to your project, it will not have blue background color.
Usage
@mantine/carousel
package is based on embla carousel:
Options
Embla options
You can pass configuration options directly to embla carousel with emblaOptions
prop.
You can find embla options description in embla options reference.
Example of passing loop
, dragFree
and align
options:
Size and gap
Set slideSize
and slideGap
on Carousel
component to control size and gap of every slide:
Responsive styles
slideSize
and slideGap
props work the same way as style props,
you can pass an object with values for different breakpoints:
Container queries
To use container queries
instead of media queries, set type="container"
. With container queries, slides 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. It is required to use exact px or em values.
To see how the slides size and gap changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo:
Drag free
dragFree
will disable slides snap points – user will be able to stop dragging at any position:
Vertical orientation
Carousel with orientation="vertical"
requires height
prop to be set:
Controls icons
You can replace default next/previous controls icons with any React nodes:
100% height
Set height="100%"
to make Carousel take 100% height of the container. Note that in this case:
- container element must have
display: flex
styles - carousel root element must have
flex: 1
styles - container element must have fixed height
Get embla instance
You can get embla instance with getEmblaApi
prop.
You will be able enhance carousel with additional logic after that using embla api methods:
Embla plugins
Set plugins
prop to enhance carousel with embla plugins.
Note that plugins are not installed with @mantine/carousel
package and you will need to
install them on your side.
Example with autoplay plugin:
Styles API
Carousel
supports Styles API, you can add styles to any inner element of the component withclassNames
prop. Follow Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements