Carousel

Loading...

<flint-carousel-content>

• Tag: <flint-carousel-content>
• Class: FlintCarouselContent

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintCarouselContent } from '@getufy/flint-ui';

Usage

<flint-carousel-content></flint-carousel-content>

Properties

Property	Attribute	Type	Default	Description
index	index	number	0	Zero-based index of the first visible slide.
itemsPerView	items-per-view	number	1	Number of slides visible at once.
orientation	orientation	Orientation	'horizontal'	Slide direction axis.

CSS Parts

Name	Description
track	The track element.

CSS Custom Properties

Property	Default
--flint-primary-color	—
--flint-border-radius-md	—

---

<flint-carousel-item>

• Tag: <flint-carousel-item>
• Class: FlintCarouselItem

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintCarouselItem } from '@getufy/flint-ui';

Usage

<flint-carousel-item></flint-carousel-item>

CSS Parts

Name	Description
base	The component's base wrapper element.

CSS Custom Properties

Property	Default
--flint-carousel-items-per-view	1

---

<flint-carousel-previous>

Carousel Previous: navigation button to go to the previous slide.

• Tag: <flint-carousel-previous>
• Class: FlintCarouselPrevious

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintCarouselPrevious } from '@getufy/flint-ui';

Usage

<flint-carousel-previous></flint-carousel-previous>

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether the previous button is disabled.
orientation	orientation	Orientation	'horizontal'	Slide direction axis, inherited from the parent carousel.

Slots

Name	Description
(default)	Custom icon content, replaces default chevron.

CSS Parts

Name	Description
button	The button element.

---

<flint-carousel-next>

Carousel Next: navigation button to go to the next slide.

• Tag: <flint-carousel-next>
• Class: FlintCarouselNext

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintCarouselNext } from '@getufy/flint-ui';

Usage

<flint-carousel-next></flint-carousel-next>

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether the next button is disabled.
orientation	orientation	Orientation	'horizontal'	Slide direction axis, inherited from the parent carousel.

Slots

Name	Description
(default)	Custom icon content, replaces default chevron.

CSS Parts

Name	Description
button	The button element.

---

<flint-carousel>

Carousel: a slideshow component for cycling through content.

• Tag: <flint-carousel>
• Class: FlintCarousel

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintCarousel } from '@getufy/flint-ui';

Usage

<flint-carousel></flint-carousel>

Properties

Property	Attribute	Type	Default	Description
loop	loop	boolean	false	When true, navigation wraps from last slide back to first and vice versa.
orientation	orientation	Orientation	'horizontal'	Slide direction axis.
autoplay	autoplay	number	0	Auto-advance interval in milliseconds. Set to 0 to disable.
itemsPerView	items-per-view	number	1	Number of slides visible simultaneously.
label	label	string	'Carousel'	Accessible label for the carousel region.
touch	touch	boolean	true	Enable touch/swipe gestures.
mouseDragging	mouse-dragging	boolean	false	Enable mouse-based drag navigation (mousedown/mousemove/mouseup).

Events

Event	Detail	Description
flint-carousel-change	{ index: number; total: number }	Fired when the active slide changes. detail: { index: number; total: number }

Slots

Name	Description
(default)	Carousel content: flint-carousel-content, flint-carousel-previous, flint-carousel-next.

CSS Parts

Name	Description
base	The component's base wrapper element.

CSS Custom Properties

Property	Default
--flint-carousel-gap	0px
--flint-carousel-duration	0.35s
--flint-carousel-ease	cubic-bezier(0.25, 0.1, 0.25, 1
--flint-carousel-height	320px
--flint-carousel-items-per-view	1

Methods

Method	Description
next(): void	Advance to the next slide.
previous(): void	Go to the previous slide.
goTo(index: number): void	Jump to a specific slide (0-based index).

---