www/docs/components/carousel.mdx
import CarouselControlled from '!!raw-loader!../examples/Carousel/Controlled'; import CarouselUncontrolled from '!!raw-loader!../examples/Carousel/Uncontrolled'; import CarouselFade from '!!raw-loader!../examples/Carousel/CarouselFade'; import IndividualIntervals from '!!raw-loader!../examples/Carousel/IndividualIntervals'; import DarkVariant from '!!raw-loader!../examples/Carousel/DarkVariant'; import NoTransition from '!!raw-loader!../examples/Carousel/NoTransition';
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
<CodeBlock language="jsx" live> {CarouselUncontrolled} </CodeBlock>You can also control the Carousel state, via the
activeIndex prop and onSelect handler.
Add the fade prop to your carousel to animate slides with a fade transition instead of a slide.
Set the slide prop to false to disable the transition animation between slides.
You can specify individual intervals for each carousel item via the interval
prop.
Add variant="dark" to the Carousel for darker controls, indicators, and captions.
:::caution Heads up!
Dark variants for components were deprecated in Bootstrap v5.3.0 with the introduction
of color modes. Instead of adding variant="dark", set data-bs-theme="dark" on the root
element, a parent wrapper, or the component itself.
:::
<CodeBlock language="jsx" live> {DarkVariant} </CodeBlock>