Image Marquee

Description

The Image Marquee component is a versatile and dynamic element designed to create scrolling image displays. It allows for multiple rows of images that move horizontally, with customizable speed and layout options. This component is ideal for showcasing multiple images in an engaging, space-efficient manner.

Installation

bash

sabaccui add imageMarquee

Usage

Here are examples of how to use the Image Marquee component in a Storyblok block:

1 line with 3 images and 10 seconds duration

Preview

3 lines with 100px height and 20 seconds duration

Preview

Schema

Field	Type	Description	Default
`images`	`multiasset`	An array of image assets to be displayed in the marquee. Only image files are allowed.	-
`lines`	`number`	The number of horizontal lines in the marquee.	1
`lineHeight`	`number`	The height of each line in pixels.	64
`duration`	`number`	The time in seconds for one complete cycle of the marquee.	-
`overlay`	`boolean`	Enables a gradient overlay effect on the marquee.	`false`

Notes

The component uses a computed property imageRows to distribute images across the specified number of lines.
Images are resized to match the specified lineHeight using Storyblok's image transformation feature.
Alternate rows move in opposite directions for visual interest.
The component is editable within the Storyblok editor.

Best Practices:

Choose images with similar aspect ratios for a consistent look.
Adjust the duration based on the number of images and desired speed of scrolling.
Use an odd number of lines for a more dynamic appearance, as it ensures the bottom row moves in the opposite direction of the top row.
Consider the lineHeight in relation to your overall design to ensure the marquee fits well within your layout.