Slider Component

A Slider component that displays multiple images or content panels with swipe and arrow and bullets support to react direct any of the slide insted of doing doing from arrow next prev. also accessibile from Keyboard navigable for accessibility purpose. The component is also keyboard-navigable to support accessibility requirements.

Responsive Full-Width Carousel

Uses Carousel for smooth horizontal sliding with loop support and drag gestures.

Thumbnail Navigation (Optional)

Clickable image previews synced with the main carousel.
Scrolls thumbnails into view and highlights the currently active slide.

Arrow Navigation

Chevron-based buttons for navigating to the previous and next slides.
Always visible and positioned on either side of the main image.

Dot Navigation (Fallback for Mobile)

If showThumbnails is disabled, dot indicators appear for quick navigation.
Active dot is elongated and styled distinctly.

Desktop

Image Dimension: 1920 x 350

iPad

Image Dimension: 834 x 250

Mobile

Image Dimension: 375 x 200