Builder IFrame

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

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 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-lighter-4)]

--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--progress--background

Progress bar base color [default: var(--il-blue)]

--ilw-carousel--progress--compact--background

Progress bar base color [default: #fff]

--ilw-carousel--progress--foreground

Color of the progress [default: var(--il-orange)]

--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.8 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--tabs--focused-background-color

Slide selection buttons hover background color [default: var(--il-orange)]

--ilw-carousel--tabs--focused-foreground-color

Slide selection buttons hover foreground color [default: var(--il-blue)]

--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--button--background-color

Control buttons background color [default: var(--il-blue)]

--ilw-carousel--button--foreground-color

Control buttons foreground color [default: #fff]

--ilw-carousel--button--border-color

Control buttons border color [default: var(--il-blue)]

--ilw-carousel--button--focused-background-color

Control buttons hover background color [default: #fff]

--ilw-carousel--button--focused-foreground-color

Control buttons hover foreground color [default: var(--il-blue)]

--ilw-carousel--button--focused-border-color

Control buttons hover border color [default: var(--il-blue)]

--ilw-carousel--button--active-background-color

Control buttons active background color [default: var(--il-orange)]

--ilw-carousel--button--active-color

Control buttons active foreground color [default: var(--il-blue)]

--ilw-carousel--button--active-border-color

Control buttons active border color [default: var(--il-blue)]

--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--background

Background of the previous/next buttons [default: var(--ilw-carousel--button--background-color)]

--ilw-carousel--prevnext--foreground

Fireground of the previous/next buttons [default: var(--ilw-carousel--button--foreground-color)]

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

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

--ilw-carousel--prevnext--border-color

Border color of the previous/next buttons [default: var(--ilw-carousel--button--border-color)]

--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-color--background

Global style: Background color

--ilw-color--text

Global style: Text color

--ilw-color--border

Global style: Border color

--ilw-color--border-light

Global style: Light border color

--ilw-color--link

Global style: Link color

--ilw-color--link-hover

Global style: Link hover color

--ilw-color--link-visited

Global style: Link visited color

--ilw-color--heading

Global style: Heading color

--ilw-color--heading-link

Global style: Heading link color

--ilw-color--heading-link-hover

Global style: Heading link hover color

--ilw-color--heading-link-visited

Global style: Heading link visited color

--ilw-color--control

Global style: Control color

--ilw-color--control-text

Global style: Control text color

--ilw-color--control-accent

Global style: Control accent color

--ilw-color--control-accent-text

Global style: Control accent text color

--ilw-color--table-border

Global style: Table border color

--ilw-color--table-background

Global style: Table background color

--ilw-color--table-row-stripe

Global style: Table row stripe color

--ilw-color--table-head-background

Global style: Table head background color

--ilw-color--table-head-color

Global style: Table head text color

--ilw-color--focus--background

Global style: Focus background color

--ilw-color--focus--text

Global style: Focus text color

--ilw-color--focus--outline

Global style: Focus outline color

--ilw-margin--side

Global style: Side margin in pixels

--ilw-panel--color

Global style: Panel color (depreciated)

--ilw-panel--highlighted-color

Global style: Panel highlighted color (depreciated)

--ilw-panel--focused-color

Global style: Panel focused color (depreciated)

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.

Copied to clipboard

This is the additional HTML used to test the item.