Card Carousel Component

The Card Carousel component creates an interactive, touch-enabled carousel with navigation controls and position indicators. Perfect for showcasing content in a structured, paginated format with smooth transitions and infinite scroll capability.

Live Demo

Key Features

• Navigation Controls: Intuitive prev/next buttons with keyboard support

• Position Indicators: Interactive dots showing current slide position

• Touch Support: Swipe gestures for mobile devices with smooth transitions

• Infinite Scroll: Seamless looping with smooth transitions between sets

• Accessibility: Full keyboard navigation and ARIA support

Implementation

1
<CarouselCard>
2
    <div class="flex flex-col bg-bg-card shadow-card w-[250px] min-w-min gap-2 p-6 shrink-0">
3
    <div class="flex flex-row items-center gap-2">
4
      <h3 class="w-full font-bold">Card 1</h3>
5
    </div>
6
    <p class="text-text-secondary w-fit text-sm">Card 1 description</p>
7
  </div>
8
    <!-- Your items -->
9
</CarouselCard>

1
<CarouselCard
2
    infinite
3
    fadeEdges
4
    showDots
5
    class="custom-carousel"
6
    rowProps={{
7
        class: 'items-center gap-4'
8
    }}
9
>
10
    <!-- Your items -->
11
</CarouselCard>

Card Carousel Component Props API

Features in Detail

Infinite Scroll

The infinite scroll feature provides a seamless, endless browsing experience:

• Automatically clones items to create smooth transitions

• Maintains consistent navigation and dot indicators

• Seamlessly jumps between item sets without visual interruption

• Preserves correct item order and positioning

1
<CarouselCard infinite>
2
    <!-- Your items -->
3
</CarouselCard>

Navigation System

The carousel provides multiple ways to navigate:

1. Button Controls

   • Previous/Next buttons for manual navigation
   • Automatically handles infinite scroll transitions
   • Visible hover states and accessibility support

2. Dot Indicators

   • Interactive dots showing current position
   • Click to jump to specific slides
   • Keyboard navigation support (Left/Right arrows)
   • Maintains correct position with infinite scroll

3. Touch Navigation

   • Swipe gestures for mobile devices
   • Smooth transitions between slides
   • Minimum swipe threshold for intentional navigation

Accessibility Features

The component implements several accessibility enhancements:

• ARIA roles and labels for interactive elements

• Keyboard navigation support throughout

• Focus management for dot indicators

• Screen reader friendly navigation

• Proper tab order and focus states

Best Practices

1. Content Guidelines

   • Use consistent card dimensions
   • Keep content concise and scannable
   • Maintain adequate spacing between cards

2. Responsive Design

   • Test navigation on all devices
   • Adjust card sizes for different screens
   • Ensure touch targets are accessible

Common Use Cases