Carousel

Displays multiple items in a scrollable area

Demo

API

Tag

Name
`<s-carousel>`

Slots

Tag	Slot Name	Required	Value	Example
`<div>`	`carousel-item`		A carousel item.	`<div slot="carousel-item">My Carousel Item</div>`

Attributes

Name	Type	Required	Description
itemwidth	Number		Width of each carousel item in pixels. All carousel items must have the same width.
itemheight	Number		Height of each carousel item in pixels. All carousel items must have the same height.

Properties

Name	Type	Required	Description
itemWidth	Number		Width of each carousel item in pixels. All carousel items must have the same width.
itemHeight	Number		Height of each carousel item in pixels. All carousel items must have the same height.

Methods

Name	Description
`addItem(item: HTMLElement)`	Call this method to dynamically add an HTML child element to the end of the carousel.
`removeItem(index: number)`	Call this method to dynamically remove an item from the carousel by index.

Demo

API

Tag

Name
`<SCarousel>`

Slots

Tag	Slot Name	Required	Value	Example
`<div>`	`carousel-item`		A carousel item.	`<div slot="carousel-item">My Carousel Item</div>`

Props

Name	Type	Required	Description
itemWidth	Number		Width of each carousel item. All carousel items must have the same width.
itemHeight	Number		Height of each carousel item. All carousel items must have the same height.

Methods

Name	Description
`addItem(item: HTMLElement)`	Call this method to dynamically add an HTML child element to the end of the carousel.
`removeItem(index: number)`	Call this method to dynamically remove an item from the carousel by index.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"skylab.carousel.ariaLabel.goToSlide"`	Label for the "go to slide" button.	Go to slide {INDEX}

Guidelines

Providing content

There should be a maximum of 5 content items. Content should be provided as slotted children of the carousel component. To dynamically add or remove items, use the addItem and removeItem methods.

Example:

async function addCarouselItem() { const carousel = document.querySelector("s-carousel"); const newItem = document.createElement("div"); newItem.innerHTML = "New Item"; await carousel.addItem(newItem); } async function removeCarouselItem() { const carousel = document.querySelector("s-carousel"); await carousel.removeItem(0); }

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com