ImageList

Container for multiple Image child components with various display modes (grid, carousel, flex, etc.)

Required Props: idSupports Children: Image

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`mode`	string grid \| carousel \| hero \| masonry \| infinite \| flex	Display mode for images Default: `"flex"`	`grid`
`itemsPerView`	number	Number of items visible at once (for carousel/grid) Default: `3`	-
`flexDirection`	string	Flex layout direction Default: `"flex-row"`	`flex-col`
`alignItems`	string	Vertical alignment Default: `"items-center"`	-
`justifyContent`	string	Horizontal alignment Default: `"justify-start"`	-
`gap`	string	Space between images Default: `"gap-2"`	`gap-4`
`autoScroll`	booleanstring	Carousel auto-advance Default: `false`	-
`autoScrollInterval`	number	Milliseconds between slides Default: `3000`	-
`infiniteSpeed`	number	Marquee speed for infinite mode Default: `30`	-
`infiniteDirection`	string left \| right	- Default: `"left"`	-
`animationEnabled`	booleanstring	- Default: `true`	-
`previewInEditor`	booleanstring	- Default: `false`	-
`showNavigation`	booleanstring	- Default: `true`	-
`showDots`	booleanstring	- Default: `true`	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	-	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`root`	object	-	-