Carousel¶

A slideshow component for cycling through elements, like a carousel.

Examples¶

Default, and fade — the crossfade transition instead of the default slide.

DefaultFade

Usage

Fill the slides slot with one or more Carousel Item components.

{% embed 'bootstrap_components:carousel' with {
  with_controls: true,
  with_indicators: true,
  interval: 0,
} %}
  {% block slides %}
    {% include 'bootstrap_components:carousel_item' with {
      image_url: 'https://placehold.co/1200x675/777777/ffffff?text=First+slide',
      image_alt: 'First slide',
      title: 'First slide label',
      body: 'Some representative placeholder content for the first slide.',
    } %}
    {% include 'bootstrap_components:carousel_item' with {
      image_url: 'https://placehold.co/1200x675/666666/ffffff?text=Second+slide',
      image_alt: 'Second slide',
      title: 'Second slide label',
      body: 'Some representative placeholder content for the second slide.',
    } %}
  {% endblock %}
{% endembed %}

Crossfades between slides instead of sliding them.

Usage

{% embed 'bootstrap_components:carousel' with {
  variant: 'fade',
  with_controls: true,
  with_indicators: false,
  interval: 0,
} %}
  {% block slides %}
    {% include 'bootstrap_components:carousel_item' with {
      image_url: 'https://placehold.co/1200x675/777777/ffffff?text=First+slide',
      image_alt: 'First slide',
      title: 'First slide label',
      body: 'Some representative placeholder content for the first slide.',
    } %}
    {% include 'bootstrap_components:carousel_item' with {
      image_url: 'https://placehold.co/1200x675/666666/ffffff?text=Second+slide',
      image_alt: 'Second slide',
      title: 'Second slide label',
      body: 'Some representative placeholder content for the second slide.',
    } %}
  {% endblock %}
{% endembed %}

Props¶

Prop	Type	Description	Example
`variant`	string	`default` (slide) or `fade`. Defaults to `default`.	`default`
`with_controls`	boolean	Add previous/next controls.	`true`
`with_indicators`	boolean	Add the slide indicators.	`true`
`show_pause`	boolean	Show a pause/resume control on an autoplaying carousel. WCAG 2.2.2 requires a way to stop automatically-moving content; controls/indicators alone don't satisfy it. Defaults to `true`.	`true`
`with_touch`	boolean	Allow swiping left/right on touchscreens. Defaults to `true`.	`true`
`interval`	number	Delay in ms between automatic slides. `0` disables autoplay. Defaults to `5000`.	`0`
`autoplay_mode`	string	`carousel` (autoplay on load) or `true` (autoplay after first interaction). Only applies when `interval` is above `0`.	`carousel`
`carousel_id`	string	Must start with a letter. Randomly generated if empty.
`color_scheme`	string	`light` or `dark`. Controls, indicators and pause button use Bootstrap's dark color mode when set to `dark`. Defaults to `light`.	`light`

Slots¶

Slot	Description
`slides`	Each slide is a Carousel Item component.

Variants¶

Variant	Description
`default`	Slides transition by sliding horizontally.
`fade`	Slides crossfade instead of sliding.

Carousel Item¶

Internal to Carousel — used inside its slides slot. Each item is one slide: an image (or a placeholder when none is set) inside a ratio box, 16:9 by default, with an optional caption.

Props¶

Prop	Type	Description	Example
`image_object`	object	The slide image, chosen with the Canvas image picker. Takes precedence over `image_url`.
`interval`	number	Per-slide override for the delay (ms) before advancing to the next slide.
`image_url`	string	Slide image URL, used when no image is chosen. When neither is set, a placeholder renders instead.
`image_alt`	string	Alt text for the slide image. Required whenever `image_url` is set (WCAG 1.1.1).
`title`	string	Slide caption heading, inside `.carousel-caption`. Its level comes from `heading_level`.	`First slide label`
`body`	string	Slide caption body, rendered inside `.carousel-caption` after the title.
`color_scheme`	string	`light` or `dark`. Caption scrim/text polarity for this slide — independent of the parent carousel's `color_scheme`. Defaults to `dark`.	`dark`
`ratio`	string	Shape of the slide media: `16x9` (default), `21x9`, `4x3` or `1x1`.	`16x9`
`heading_level`	integer	Heading level of the slide title, 2–6. Defaults to `5`.	`5`