Carousel (carousel)

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

🔗 External documentation.

                        type: boolean

                      

                        type: boolean

                      

                        type: boolean
default: true

                      

                        type: number
default: 5000

                      

                        type: string

                      

            id: carousel
label: Carousel
description: 'A slideshow component for cycling through elements, like a carousel.'
group: Carousel
homepage: 'https://getbootstrap.com/docs/5.3/components/carousel/'
variants:
    default:
        id: default
        label: Default
    fade:
        id: fade
        label: Crossfade
        description: 'Animate slides with a fade transition instead of a slide.'
    dark:
        id: dark
        label: 'Dark (deprecated)'
        description: 'For darker controls, indicators, and captions.'
    fade__dark:
        id: fade__dark
        label: 'Crossfade dark (deprecated)'
slots:
    slides:
        id: slides
        label: Slides
        description: 'Each slide is a collection of carousel items.'
props:
    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
    with_touch:
        id: with_touch
        label: 'With touch swiping?'
        description: 'Carousels support swiping left/right on touchscreen devices to move between slides.'
        schema:
            type: boolean
            default: true
    interval:
        id: interval
        label: Interval
        description: 'The amount of time to delay between automatically cycling to the next item. In ms. 0 to disable autoplay.'
        schema:
            type: number
            default: 5000
    carousel_id:
        id: carousel_id
        label: ID
        description: 'Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': carousel
            slides:
                -
                    '@component': carousel_item
                    image:
                        '@element': img
                        src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo='
                    caption:
                        -
                            '@element': h5
                            '@content': 'First slide label'
                        -
                            '@element': p
                            '@content': 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
                -
                    '@component': carousel_item
                    image:
                        '@element': img
                        src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=='
                    caption:
                        -
                            '@element': h5
                            '@content': 'Second slide label'
                        -
                            '@element': p
                            '@content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                -
                    '@component': carousel_item
                    image:
                        '@element': img
                        src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo='
                    caption:
                        -
                            '@element': h5
                            '@content': 'Third slide label'
                        -
                            '@element': p
                            '@content': 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
            with_controls: true
            with_indicators: true