The Slider Container and Slider Image components are designed to work seamlessly together, allowing you to create a simple image slider. The Slider Container acts as the outer structure, with options to customize the background color and control spacing (padding and margin) both above and below the slider. Inside the container, the Slider Image component takes an image and provides fields for adding alt text, an optional image caption, and, if desired, specifying the aspect ratio.
Example
Image caption
Image caption
Image caption
Slider Container Layout and Style Options
Background Color
Background Color: Default (white)
Background Color: Default (white)
Background Color: Default (white)
Background Color: Muted (light gray)
Background Color: Muted (light gray)
Background Color: Muted (light gray)
Background Color: Primary (red)
Background Color: Primary (red)
Background Color: Primary (red)
Background Color: Secondary (teal)
Background Color: Secondary (teal)
Background Color: Secondary (teal)
Background Color: Tertiary (dark gray)
Background Color: Tertiary (dark gray)
Background Color: Tertiary (dark gray)
Padding
Padding top and bottom of section: None
Padding top and bottom of section: None
Padding top and bottom of section: None
Padding top and bottom of section: Top and bottom
Padding top and bottom of section: Top and bottom
Padding top and bottom of section: Top and bottom
Padding top and bottom of section: Top only
Padding top and bottom of section: Top only
Padding top and bottom of section: Top only
Padding top and bottom of section: Bottom only
Padding top and bottom of section: Bottom only
Padding top and bottom of section: Bottom only
Bottom Margin
Bottom Margin: None
Bottom Margin: None
Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: X-Small
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Medium
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: Large
Bottom Margin: Large
Bottom Margin: X-Large
Bottom Margin: X-Large
Bottom Margin: X-Large
the end
Top Margin
Top Margin: None
Top Margin: None
Top Margin: None
Top Margin: X-Small
Top Margin: X-Small
Top Margin: X-Small
Top Margin: Small
Top Margin: Small
Top Margin: Small
Top Margin: Medium
Top Margin: Medium
Top Margin: Medium
Top Margin: Large
Top Margin: Large
Top Margin: Large
Top Margin: X-Large
Top Margin: X-Large
Top Margin: X-Large
the end
Usage
Do
- Ensure images are high quality and properly sized for the best presentation.
- Use the optional image caption when additional context or explanation is needed for the image.
- Adjust the aspect ratio to maintain consistency in how images are displayed across different slides.
- Test the slider on different devices to ensure it looks good and functions properly on both desktop and mobile screens.
- Keep the number of slides manageable to avoid overwhelming the user with too much content.
- Ensure that the slider content contributes meaningfully to the overall user experience and isn’t used purely for decoration.
Don't
- Don’t use images with low resolution, as they will appear pixelated or blurry.
- Avoid using too many slides, which can overwhelm users and decrease engagement.
- Refrain from using captions that are too long, as they can clutter the design and distract from the image.
- Avoid choosing a background color that makes text or images difficult to see or creates a jarring contrast.
- Don’t use excessively large image files, as they can slow down page loading times.
- Don’t rely on the slider for critical information that users need to see immediately, as some users may not interact with it.
Accessibility
- Ensure that you provide suitable alt text for images. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.