Media Carousel

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
  • Touch gestures supported on mobile devices
  • Media maintains aspect ratio across breakpoints