Slider
Description
The Slider component is a versatile and interactive element designed to showcase multiple content items in a horizontally scrollable format. It provides a smooth, touch-friendly interface for users to navigate through a series of slides, making it ideal for image galleries, product showcases, or any content that benefits from a carousel-like presentation.
Installation
sabaccui add slider
Usage
Here's an example of how to use the Slider component in a Storyblok block:
Preview
Lorem Ipsum 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem Ipsum 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem Ipsum 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem Ipsum 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem Ipsum 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
items | bloks | An array of content blocks to be displayed as slides. Only components with the tag molecule are allowed. | [] |
Related Components
No related components specified in the provided information
Notes
- The component uses a horizontal scroll mechanism with snap points for smooth sliding behavior.
- Navigation is implemented with dots for each slide and next/previous buttons.
- The slider is responsive and adjusts to the container width.
- Accessibility features are included, such as aria labels for navigation buttons.
Best Practices:
- Ensure all slides have a consistent aspect ratio for the best visual appearance.
- Use high-quality images that are optimized for web performance.
- Consider limiting the number of slides to maintain quick loading times and user engagement.
- Provide alternative navigation methods for users who may have difficulty with touch or mouse interactions.