The Image Slider (Large, Captions) component allows you to present a rotating series of images with optional captions. Authors can customize the slider with different navigation options, alignment settings, autoplay, and draggable features. This component works best when authors use a series of large images that are the same size.
Caption Options
Text Alignment
Text Color
Overlay
Location
Hide on Mobile
The hide on mobile setting for captions is useful when captions are long, as they can sometimes be cut off or obscure the entire image on smaller screens. Enabling this option ensures a cleaner and more user-friendly experience on mobile devices by hiding captions when space is limited.
Dots
Dot navigation displays small dots below the slider, indicating the number of images and highlighting the currently active one. This provides users with a quick way to see their position in the slideshow and select specific images. Different color options are available to ensure the dots are visible and fit the design.
Dot Colors
Autoplay
The autoplay option automatically cycles through images in the slider without user interaction. It’s useful for showcasing content in a hands-off way, particularly when you want to highlight multiple images in a sequence. For a smooth user experience, it’s recommended to set the autoplay interval long enough to give users time to view each image before it changes.
Autoplay Interval
Margin Bottom
the end
Margin Top
the end
Usage
Do
- Ensure all images used are high quality and of the same size for a smooth, consistent experience.
- Add clear, concise captions if they help to provide context or additional information about the images.
- Select a navigation style (arrows, dots, or both) that best suits your audience’s needs and the design of the page.
- Consider enabling autoplay for sliders that are meant to display a sequence of images without user interaction.
- Use the alignment option (center or left) that fits well with your overall page layout and design.
- Test the slider on mobile and desktop to ensure it works well across devices.
- Enable draggable interactions if you expect users to interact with the slider on touch devices.
- Set a reasonable autoplay interval to give users enough time to view each image.
- Keep the number of images manageable to avoid overwhelming users or slowing down the page.
Don't
- Don’t use images with drastically different dimensions, as this can make the slider appear uneven and disjointed.
- Avoid overcrowding the slider with too many images, which can overwhelm users and affect performance.
- Don’t rely solely on captions to convey important information; ensure the images themselves communicate the main message.
- Avoid using autoplay if your images contain detailed content that requires longer viewing time.
- Don’t set the autoplay interval too short, as it may frustrate users by switching images too quickly.
- Don’t use low-resolution or blurry images, as this can make your content look unprofessional.
- Avoid making the captions too long, as they may obscure the images or make the slider feel cluttered.
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.