{
    "title": "Carousel",
    "tag": "ilw-carousel",
    "github": "https://github.com/web-illinois/ilw-carousel/",
    "type": "web component",
    "element-name": "ilw-carousel",
    "description": "Changing slides with images and text.",
    "builder-version": "1.3-beta",
    "version": "1.3.2",
    "date": "3/24/2026",
    "css": "https://cdn.toolkit.illinois.edu/ilw-carousel/1.3.2/ilw-carousel.css",
    "js": "https://cdn.toolkit.illinois.edu/ilw-carousel/1.3.2/ilw-carousel.js",
    "production": false,
    "notes": "",
    "parent-style": "",
    "samples": [
        {
            "name": "default",
            "description": "Default information",
            "text": "<ilw-slide>\n    <h3>Northern Lights</h3>\n    <p>Also known as <a href=\"#\">aurora borealis</a>, they illuminate the sky.</p>\n    <div class=\"ilw-buttons\" slot=\"buttons\">\n        <button class=\"ilw-button\">Explore Illinois</button>\n    </div>\n    <img src=\"https://fastly.picsum.photos/id/724/1920/768.jpg?hmac=oaOY1Ja3q32qdCoUGuVXUNvp6bQq3WSNi1Fbp6KbmAc\"\n         alt=\"Red and green lights in the night sky with evergreen trees in the foreground.\"\n         slot=\"image\">\n</ilw-slide>\n<ilw-slide>\n    <h3>Tundra</h3>\n    <p>Tundra is a type of biome where tree growth is hindered by frigid temperatures and short growing\n        seasons.</p>\n    <img src=\"https://fastly.picsum.photos/id/547/1920/768.jpg?hmac=QK_aYd-IVY12I8ZvvuSMbzgFNFxaXGLobEAeaPLTQEA\"\n         alt=\"Landscape photo of wooded hills with patches of snow, and mountains in the distance.\"\n         slot=\"image\">\n</ilw-slide>\n<ilw-slide>\n    <h3>Blue Flowers</h3>\n    <p>Clusters of blue flowers with vivid colors.</p>\n    <img src=\"https://fastly.picsum.photos/id/701/1920/768.jpg?hmac=CO7UTJncYibcckG8WC6NI4QGf0ZRd7bXwmukliNyYDc\"\n         alt=\"Close-up photo of a field of blue flowers.\"\n         slot=\"image\">\n</ilw-slide>"
        }
    ],
    "attributes-fixed": [],
    "attributes-text": [
        {
            "name": "time",
            "description": "Time in seconds for each slide, defaults to 10.",
            "depreciated": false,
            "value": ""
        },
        {
            "name": "activeslide",
            "description": "Set the actively shown slide.",
            "depreciated": false,
            "value": ""
        },
        {
            "name": "label",
            "description": "Accessible name for the whole carousel. Defaults to \"Highlighted Content\".",
            "depreciated": false,
            "value": ""
        },
        {
            "name": "height",
            "description": "CSS height for the carousel images. Defaults to 500px.",
            "depreciated": false,
            "value": ""
        }
    ],
    "attributes": [
        {
            "name": "controls",
            "description": "Alternative control layouts.",
            "depreciated": false,
            "values": [
                "",
                "compact"
            ]
        },
        {
            "name": "theme",
            "description": "Color theme used",
            "depreciated": false,
            "values": [
                "",
                "gray",
                "blue"
            ]
        },
        {
            "name": "playing",
            "description": "If the carousel should autoplay on load.",
            "depreciated": false,
            "values": [
                "",
                "true",
                "false"
            ]
        },
        {
            "name": "width",
            "description": "Make the component expand to full width even inside a container",
            "depreciated": false,
            "values": [
                "",
                "full"
            ]
        },
        {
            "name": "overlay",
            "description": "Move the text content to be over the image on wider viewports",
            "depreciated": false,
            "values": [
                "",
                "true"
            ]
        }
    ],
    "classes-fixed": [],
    "classes": [],
    "css-variables": [
        {
            "name": "--ilw-carousel--font",
            "depreciated": false,
            "description": "Font for the carousel text content [default: var(--il-font-sans)]"
        },
        {
            "name": "--ilw-carousel--height",
            "depreciated": false,
            "description": "Carousel image height [default: 500px]"
        },
        {
            "name": "--ilw-carousel--background",
            "depreciated": false,
            "description": "Background behind text content below the carousel [default: #fff]"
        },
        {
            "name": "--ilw-carousel--control--height",
            "depreciated": false,
            "description": "Height of the controls area [default: 80px]"
        },
        {
            "name": "--ilw-carousel--control--compact--height",
            "depreciated": false,
            "description": "Height of the controls area [default: 46px]"
        },
        {
            "name": "--ilw-carousel--control--background",
            "depreciated": false,
            "description": "Background of the controls area [default: var(--il-storm-95)]"
        },
        {
            "name": "--ilw-carousel--progress--width",
            "depreciated": false,
            "description": "Width of the progress bar  [default: 300px]"
        },
        {
            "name": "--ilw-carousel--progress--compact--width",
            "depreciated": false,
            "description": "Width of the progress bar  [default: 160px]"
        },
        {
            "name": "--ilw-carousel--progress--height",
            "depreciated": false,
            "description": "Height of the progress bar [default: 10px]"
        },
        {
            "name": "--ilw-carousel--tabs--column-gap",
            "depreciated": false,
            "description": "Spacing between slide number tabs [default: 10px]"
        },
        {
            "name": "--ilw-carousel--tabs--compact--column-gap",
            "depreciated": false,
            "description": "Spacing between slide number tabs [default: 2px]"
        },
        {
            "name": "--ilw-carousel--tabs--margin-top",
            "depreciated": false,
            "description": "Spacing above slide number tabs [default: 10px]"
        },
        {
            "name": "--ilw-carousel--play--height",
            "depreciated": false,
            "description": "Play button height [default: 40px]"
        },
        {
            "name": "--ilw-carousel--play--font",
            "depreciated": false,
            "description": "Play button font [default: 400 2.125rem/0.5 var(--il-font-sans)]"
        },
        {
            "name": "--ilw-carousel--tabs--height",
            "depreciated": false,
            "description": "Slide number tab height [default: 32px]"
        },
        {
            "name": "--ilw-carousel--tabs--width",
            "depreciated": false,
            "description": "Slide number tab width [default: 32px]"
        },
        {
            "name": "--ilw-carousel--tabs--font",
            "depreciated": false,
            "description": "Slide number tab font [default: 700 1.188rem/1.5 var(--il-font-sans)]"
        },
        {
            "name": "--ilw-carousel--button--border-width",
            "depreciated": false,
            "description": "Control buttons border width [default: 2px]"
        },
        {
            "name": "--ilw-carousel--button--compact--border-width",
            "depreciated": false,
            "description": "Control buttons border width [default: 5px]"
        },
        {
            "name": "--ilw-carousel--prevnext--height",
            "depreciated": false,
            "description": "Height of the previous/next buttons [default: 160px]"
        },
        {
            "name": "--ilw-carousel--prevnext--width",
            "depreciated": false,
            "description": "Width of the previous/next buttons [default: 46px]"
        },
        {
            "name": "--ilw-carousel--prevnext--border-width",
            "depreciated": false,
            "description": "Border width of the previous/next buttons [default: 2px]"
        },
        {
            "name": "--ilw-carousel--prevnext--line-height",
            "depreciated": false,
            "description": "Line height of the previous/next buttons  [default: 1]"
        },
        {
            "name": "--ilw-carousel--prevnext--font-size",
            "depreciated": false,
            "description": "Font size of the previous/next buttons  [default: 1rem]"
        },
        {
            "name": "--ilw-slide--font",
            "depreciated": false,
            "description": "Font for the slide headings [default: 700 2rem/1.3 var(--il-font-sans)]"
        },
        {
            "name": "--ilw-slide--paragraph-font",
            "depreciated": false,
            "description": "Font for the slide paragraphs [default: 500 1.125rem/1.5 var(--il-font-sans)]"
        },
        {
            "name": "--ilw-slide--text-color",
            "depreciated": false,
            "description": "Color for the slide content [default: #000]"
        },
        {
            "name": "--ilw-slide--overlay--text-color",
            "depreciated": false,
            "description": "Color for the slide content when overlay is used [default: #fff]"
        },
        {
            "name": "--ilw-slide--content-width",
            "depreciated": false,
            "description": "Max width for the slide content area [default: 500px]"
        },
        {
            "name": "--ilw-slide--content-extra-padding",
            "depreciated": false,
            "description": "Extra padding to add to the top of the content area to allow for controls [default: 1.125rem]"
        },
        {
            "name": "--ilw-slide--compact--content-extra-padding",
            "depreciated": false,
            "description": "Extra padding to add to the top of the content area to allow for controls when in compact mode [default: 1rem]"
        },
        {
            "name": "--ilw-slide--overlay--padding",
            "depreciated": false,
            "description": "Padding for the slide content area when overlay is used [default: 1.5rem]"
        },
        {
            "name": "--ilw-slide--overlay--left",
            "depreciated": false,
            "description": "Left position for the slide content area when overlay is used [default: 8vw]"
        },
        {
            "name": "--ilw-slide--overlay--font",
            "depreciated": false,
            "description": "Font for the slide headings when overlay is used [default: 700 2.25rem/1 var(--il-font-sans)]"
        },
        {
            "name": "--ilw-slide--overlay--background",
            "depreciated": false,
            "description": "Background for the slide overlay [default: radial-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.35))]"
        },
        {
            "name": "--ilw-slide--shadow-color",
            "depreciated": false,
            "description": "Shadow color for the slide headings when overlay is used [default: rgba(0, 0, 0, 1)]"
        },
        {
            "name": "--ilw-slide--overlay--paragraph-font",
            "depreciated": false,
            "description": "Font for the slide paragraphs when overlay is used [default: 500 1.25rem/1.5 var(--il-font-sans)]"
        }
    ]
}