Component: Carousel 1.2

This builder will allow you to generate a custom version of the Carousel component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

controls (attribute)

Alternative control layouts.

theme (attribute)

Color theme used

playing (attribute)

If the carousel should autoplay on load.

width (attribute)

Make the component expand to full width even inside a container

overlay (attribute)

Move the text content to be over the image on wider viewports

time (text attribute)

Time in seconds for each slide, defaults to 10.

activeslide (text attribute)

Set the actively shown slide.

label (text attribute)

Accessible name for the whole carousel. Defaults to "Highlighted Content".

height (text attribute)

CSS height for the carousel images. Defaults to 500px.

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-carousel--font

Font for the carousel text content [default: var(--il-font-sans)]

--ilw-carousel--height

Carousel image height [default: 500px]

--ilw-carousel--background

Background behind text content below the carousel [default: #fff]

--ilw-carousel--control--height

Height of the controls area [default: 80px]

--ilw-carousel--control--compact--height

Height of the controls area [default: 46px]

--ilw-carousel--control--background

Background of the controls area [default: var(--il-storm-95)]

--ilw-carousel--progress--width

Width of the progress bar [default: 300px]

--ilw-carousel--progress--compact--width

Width of the progress bar [default: 160px]

--ilw-carousel--progress--height

Height of the progress bar [default: 10px]

--ilw-carousel--tabs--column-gap

Spacing between slide number tabs [default: 10px]

--ilw-carousel--tabs--compact--column-gap

Spacing between slide number tabs [default: 2px]

--ilw-carousel--tabs--margin-top

Spacing above slide number tabs [default: 10px]

--ilw-carousel--play--height

Play button height [default: 40px]

--ilw-carousel--play--font

Play button font [default: 400 2.125rem/0.5 var(--il-font-sans)]

--ilw-carousel--tabs--height

Slide number tab height [default: 32px]

--ilw-carousel--tabs--width

Slide number tab width [default: 32px]

--ilw-carousel--tabs--font

Slide number tab font [default: 700 1.188rem/1.5 var(--il-font-sans)]

--ilw-carousel--button--border-width

Control buttons border width [default: 2px]

--ilw-carousel--button--compact--border-width

Control buttons border width [default: 5px]

--ilw-carousel--prevnext--height

Height of the previous/next buttons [default: 160px]

--ilw-carousel--prevnext--width

Width of the previous/next buttons [default: 46px]

--ilw-carousel--prevnext--border-width

Border width of the previous/next buttons [default: 2px]

--ilw-carousel--prevnext--line-height

Line height of the previous/next buttons [default: 1]

--ilw-carousel--prevnext--font-size

Font size of the previous/next buttons [default: 1rem]

--ilw-slide--font

Font for the slide headings [default: 700 2rem/1.3 var(--il-font-sans)]

--ilw-slide--paragraph-font

Font for the slide paragraphs [default: 500 1.125rem/1.5 var(--il-font-sans)]

--ilw-slide--text-color

Color for the slide content [default: #000]

--ilw-slide--overlay--text-color

Color for the slide content when overlay is used [default: #fff]

--ilw-slide--content-width

Max width for the slide content area [default: 500px]

--ilw-slide--content-extra-padding

Extra padding to add to the top of the content area to allow for controls [default: 1.125rem]

--ilw-slide--compact--content-extra-padding

Extra padding to add to the top of the content area to allow for controls when in compact mode [default: 1rem]

--ilw-slide--overlay--padding

Padding for the slide content area when overlay is used [default: 1.5rem]

--ilw-slide--overlay--left

Left position for the slide content area when overlay is used [default: 8vw]

--ilw-slide--overlay--font

Font for the slide headings when overlay is used [default: 700 2.25rem/1 var(--il-font-sans)]

--ilw-slide--overlay--background

Background for the slide overlay [default: radial-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.35))]

--ilw-slide--shadow-color

Shadow color for the slide headings when overlay is used [default: rgba(0, 0, 0, 1)]

--ilw-slide--overlay--paragraph-font

Font for the slide paragraphs when overlay is used [default: 500 1.25rem/1.5 var(--il-font-sans)]

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.