Slider
The Slider component is a full-width, carousel-style element that displays a sequence of interactive content cards with navigation controls, allowing users to browse through featured content.
When to use
Use the Slider component when you need to:
Showcase featured or priority content in a space-efficient manner
Present multiple content items of equal importance within a limited area
Allow users to browse through related content such as news articles, events, or promotional materials
Create visual interest on landing pages or key sections of your website
Highlight timely or important information that requires user attention
When not to use
Do not use the Slider component when:
The information being presented is critical for all users to see (as some users may not interact with sliders or see content beyond the first slide)
There are only one or two content items to display (consider using static components instead)
The content requires detailed comparison between items (users can only see one slide at a time)
Performance is a primary concern for your site (sliders add JavaScript overhead)
Your target audience includes users with cognitive disabilities who may have difficulty processing moving or changing content
The layout is already content-heavy and adding more interactive elements would increase cognitive load
Best practice guidelines
Content prioritisation: Place the most important content in the first slide as many users may not interact with the slider to view additional slides
Navigation controls: Always include visible previous/next controls and slide indicators to give users a clear way to navigate between slides
Auto-rotation considerations: If implementing auto-rotation, ensure there are clear controls to pause or stop the rotation and set a reasonable timing interval (at least 5 seconds per slide)
Limited slides: Keep the number of slides to a reasonable amount (3-5 is often optimal) to prevent content overload
Consistent sizing: Maintain consistent height and width for all slides to prevent jarring layout shifts when users navigate between slides
Mobile optimisation: Ensure the slider works well on touch devices with appropriate touch targets and swipe gestures
Alternative navigation: Include alternative ways to access the same content elsewhere on the site for users who may miss content in the slider
Loading performance: Optimise images and resources to ensure the slider loads quickly and doesn't negatively impact page performance
Slide indicators: Include indicators showing the total number of slides and current position (e.g., "Slide 1 of 4")
Keyboard accessibility: Ensure the slider can be operated using keyboard controls for navigation
Variations
Image position variations: Supports different image layouts including right-aligned and left-aligned configurations
Content only: Can be used without images for text-focused slides
Multiple slides visible: Can be configured to show multiple slides simultaneously for certain layouts
Auto-rotation: Can be set to automatically rotate through slides at set intervals, with pause on hover or focus
With thumbnails: Can include thumbnail navigation in addition to standard controls
Accessibility
According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Slider component has been tested against WCAG 2.2 standards with the following results:
The Slider component has been assessed for the following WCAG 2.2 criteria:
1.4.1 Use of Colour (Level A)
Pass
1.4.3 Contrast (Minimum) (Level AA)
Pass
1.3.1 Info and Relationships (Level A)
Pass
1.4.4 Resize text (Level AA)
Pass
2.1.1 Keyboard (Level A)
Pass
2.4.4 Link Purpose (In Context) (Level A)
Pass
2.4.6 Headings and Labels (Level AA)
Pass
2.4.7 Focus Visible (Level AA)
Pass
3.2.2 On Input (Level A)
Pass
3.2.3 Consistent Navigation (Level AA)
Pass
3.2.4 Consistent Identification (Level AA)
Pass
4.1.2 Name, Role, Value (Level A)
Pass
1.4.11 Non-text Contrast (Level AA)
Pass
1.4.12 Text Spacing (Level AA)
Pass
When implementing the Slider component, special attention should be paid to:
Ensuring keyboard navigation works properly for all interactive elements
Providing sufficient pause/stop controls if auto-rotation is enabled
Maintaining proper focus management when navigating between slides
Security
When implementing the Slider component, consider the following security practices:
Sanitise all content being displayed within slides, especially if content comes from user input or external sources
Implement proper Content Security Policy (CSP) settings to mitigate risks from embedded content
Ensure any linked resources (images, videos) are loaded securely over HTTPS
Validate all input parameters used to configure the slider to prevent injection attacks
Sites using this component
The Slider component is used across a variety of government and corporate websites implementing CivicTheme. Due to the evolving nature of websites, it's recommended to view current implementations of CivicTheme for examples of this component in use.
Component inspiration and uplift
This component has been modelled after the Clickable Cards and Feature Headers components from the former Australian Government Design System (AGDS). CivicTheme has uplifted the component in the following ways:
Presentation as a large feature spanning the full width of the site's body to highlight important content
Addition of support for both primary call-to-action buttons and secondary actions
Integration of supporting metadata such as topic tags and dates for events and publications
Responsive redesign so that on desktop screens, imagery sits inline with the description rather than stacked
Addition of Tag List component support to allow multiple tags in one row
Placement of date metadata below the heading component to improve readability and layout
Addition of clear slide indicators to improve user awareness of content sequence
User research on this component
★★★☆☆ Confidence rating = Moderate (Based on industry standards and limited testing)
Research on slider components in general indicates they have mixed usability results. Limited specific testing has been conducted on the CivicTheme Slider component itself, but findings from research on similar components show:
Many users interact only with the first slide and may miss subsequent content
Clear navigation controls improve engagement with additional slides
Touch device users often recognize and use swipe gestures with slider components
Auto-rotation can cause frustration for users who want to read content at their own pace
Additional targeted user research with diverse audiences would help strengthen understanding of how this component performs in government digital services contexts.
Known issues
Content visibility: Some users may miss important content if it's placed beyond the first slide
Performance impact: The JavaScript required for slider functionality can impact page performance metrics
Mobile responsiveness: On certain mobile devices, complex slider layouts may not render optimally
Touch targets: Navigation controls may be difficult to tap accurately on small touch screens
Auto-rotation timing: If auto-rotation is enabled, finding the right timing that works for all users can be challenging
More research needed
Additional research would be beneficial in the following areas:
How users with different cognitive abilities interact with and comprehend slider content
Optimal number of slides for different contexts and information types
Whether users prefer gesture-based navigation or visible controls on touch devices
If and how users notice slide indicators and how this affects their navigation behavior
Comparative effectiveness of sliders versus static content layouts for information retention
How this component meets DSS requirements
This component supports several Digital Service Standard criteria:
Have clear intent (DSS 1): The Slider component helps deliver public value by highlighting important content in a visually engaging format.
Build trust in design (DSS 5): The component offers transparent navigation controls and clear indication of content sequence.
Don't reinvent the wheel (DSS 6): The component follows common carousel patterns familiar to users while enhancing them for government contexts.
Leave no one behind (DSS 3): The component is designed with accessibility considerations to ensure content is accessible to all users.
Help improve this component
To help make this component more useful and up-to-date, you can:
Contribute to discussions about the Slider component on GitHub
Submit user research findings to help improve the component's usability
Propose changes or enhancements to the Slider component
Report any issues you encounter when implementing this component
Check out our contributing section to learn more.
Resources
Storybook
GitHub
References
Nielsen Norman Group. (2013). Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. https://www.nngroup.com/articles/auto-forwarding/
Baymard Institute. (2016). Carousel Usability: Designing an Effective UI for Websites with Content Overload. https://baymard.com/blog/homepage-carousel
W3C Web Accessibility Initiative. (2021). Carousels - ARIA Authoring Practices Guide. https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
Changelog
v1.8.0
23/07/2024
Updated layout and responsive behavior
v1.7.0
20/03/2024
Improved accessibility compliance for WCAG 2.2
v1.6.0
15/01/2024
Added support for multiple tag display
Contact us
If you have a question about the CivicTheme design system or need our help, visit the Getting Help page for guidance.
Last updated
Was this helpful?