😊 Join FOSS UOK Community. Join here →
ComponentCarousel

Carousels

Carousels are interactive components that allow users to browse through content

Variants

  • Basic Carousel: Displays a set of items with navigation arrows.
  • Autoplay Carousel: Automatically cycles through items with an option to pause.

Code Example

  • Basic Carousel
<div class="Carousel">
  <div class="Carousel-item">Item 1</div>
  <div class="Carousel-item">Item 2</div>
  <div class="Carousel-item">Item 3</div>
  <button class="Carousel-nav Carousel-prev">←</button>
  <button class="Carousel-nav Carousel-next">→</button>
</div>
  • Autoplay Carousel
<div class="Carousel" data-autoplay="true">
  <div class="Carousel-item">Item 1</div>
  <div class="Carousel-item">Item 2</div>
  <div class="Carousel-item">Item 3</div>
  <button class="Carousel-nav Carousel-prev">←</button>
  <button class="Carousel-nav Carousel-next">→</button>
  <button class="Carousel-pause" aria-label="Pause autoplay">⏸</button>
</div>

Accessibility

  • Use tabindex="0" for focusable elements.
  • Allow navigation with ArrowLeft and ArrowRight keys.
  • Ensure navigation buttons have clear labels using aria-label
CardForm