The Media Carousel is a reusable component used to display images or videos in a horizontal, scrollable format. In the Sharjah Design System, the carousel is defined as a single component with three layout variants, allowing teams to showcase visual content consistently across different contexts while maintaining a unified interaction pattern.
Purpose
Showcase images or videos in a limited space
Highlight galleries, campaigns, or featured content
Support visual storytelling without overwhelming the page
Present multiple related media items in a structured flow
Avoid using carousels for critical content that must always be visible.
Component Structure
Carousel – A full-width or container-based carousel used for general media display
Fixed image – Showing 1 image only in horizontal view
Thumbnail Media Carousel – 2 cards per raw as carousel
Accessibility Guidelines
All controls must be keyboard accessible
Provide alternative text for images
Avoid auto-playing videos with sound
Ensure focus indicators are clearly visible
Responsive Behavior
Carousel adapts to screen width without cropping key content
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
