vartheme_bs5-2.0.x-dev/src/components/organisms/carousel/carousel.config.yml

title: "Organisms/Carousel"
description:
  component: "A slideshow component for cycling through elements—images or slides of text—like a carousel."
## With controls.
controls:
  description: 'Adding in the previous and next controls.'
  default: true
  table:
    category: settings
## With indicators.
indicators:
  description: 'You can also add the indicators to the carousel, alongside the controls, too.'
  default: true
  table:
    category: settings
## Pagination demo data.
data:
  id : 'carousel-example'
  items:
  - 
    indicator_label: 'Slide 1'
    slide: '<svg class="view-empty bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="1400" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="41%" y="50%" fill="#555" style="font-size: 3.5rem">First slide</text></svg>'
    caption: '<h5>First slide label</h5>'
    text: '<p>Some representative placeholder content for the first slide.</p>'
  - 
    indicator_label: 'Slide 2'
    slide: '<svg class="view-empty bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="1400" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="41%" y="50%" fill="#444" style="font-size: 3.5rem">Second slide</text></svg>'
    caption: '<h5>Second slide label</h5>'
    text: '<p>Some representative placeholder content for the second slide.</p>'
  - 
    indicator_label: 'Third 3'
    slide: '<svg class="view-empty bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="1400" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="41%" y="50%" fill="#333" style="font-size: 3.5rem">Third slide</text></svg>'
    caption: '<h5>Third slide label</h5>'
    text: '<p>Some representative placeholder content for the third slide.</p>'