Carousel (carousel)

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

🔗 External documentation.

ID Label Description Schema
slides Slides List of renderables. Each slide is an image.
captions Captions List of renderables. Captions (title, subtitle...) for each slide
carousel_id Carousel ID Randomly generated if empty. 
                        type: string
pattern: '^[A-Za-z]+[\w\]*$'
with_controls With controls? Adding in the previous and next controls 
                        type: boolean
with_indicators With indicators? You can also add the indicators to the carousel, alongside the controls, too. 
                        type: boolean

                      
            id: carousel
label: Carousel
description: 'A slideshow component for cycling through elements, like a carousel. '
homepage: 'https://getbootstrap.com/docs/4.6/components/carousel/'
variants:
    default:
        id: default
        label: Default
    fade:
        id: fade
        label: Crossfade
        description: 'Animate slides with a fade transition instead of a slide.'
slots:
    slides:
        id: slides
        label: Slides
        description: 'List of renderables. Each slide is an image.'
    captions:
        id: captions
        label: Captions
        description: 'List of renderables. Captions (title, subtitle...) for each slide'
props:
    carousel_id:
        id: carousel_id
        label: 'Carousel ID'
        description: 'Randomly generated if empty.'
        schema:
            type: string
            pattern: '^[A-Za-z]+[\w\]*$'
    with_controls:
        id: with_controls
        label: 'With controls?'
        description: 'Adding in the previous and next controls'
        schema:
            type: boolean
    with_indicators:
        id: with_indicators
        label: 'With indicators?'
        description: 'You can also add the indicators to the carousel, alongside the controls, too.'
        schema:
            type: boolean
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': carousel
            slides:
                -
                    '@element': img
                    src: 'https://data.dilla.io/bootstrap_4/assets/slide-1.svg'
                -
                    '@element': img
                    src: 'https://data.dilla.io/bootstrap_4/assets/slide-2.svg'
                -
                    '@element': img
                    src: 'https://data.dilla.io/bootstrap_4/assets/slide-3.svg'
            captions:
                -
                    -
                        '@element': h5
                        '@content': 'First slide label'
                    -
                        '@element': p
                        '@content': 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
                -
                    -
                        '@element': h5
                        '@content': 'First slide label'
                    -
                        '@element': p
                        '@content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                -
                    -
                        '@element': h5
                        '@content': 'First slide label'
                    -
                        '@element': p
                        '@content': 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
            with_controls: true
            with_indicators: true

Default ( default )

Crossfade ( fade )

Animate slides with a fade transition instead of a slide.