Appearance
SliderGroup Component
A customizable slider/carousel component with support for various arrow positions, dots navigation, and card selection.
Overview
The SliderGroup component provides:
- Horizontal sliding functionality with smooth animations
- Multiple arrow positioning options (top, bottom, center, center-outside)
- Optional dots navigation
- Card selection capability
- Customizable card width and content
- Responsive design with automatic dot calculation
When to Use
Use the SliderGroup component when you need to:
- Display a collection of cards or items in a horizontal scrollable format
- Create image galleries or product carousels
- Show multiple items with navigation controls
- Implement a card selection interface
- Present content in a visually appealing, interactive way
Key Features
Arrow Positions: Choose from multiple arrow positions:
- Top: Arrows and dots above the slider
- Bottom: Arrows and dots below the slider
- Center: Arrows overlaid on the sides of the slider
- Center-outside: Arrows positioned outside the slider edges
Navigation Options:
- Optional dots navigation
- Previous/Next arrow buttons
- Automatic dot calculation based on container width
- Smooth scrolling behavior
Card Features:
- Customizable card width
- Card selection capability
- Default card styling with hover effects
- Custom card content through slots
Customization:
- Custom arrow buttons through slots
- Custom dot navigation through slots
- Custom card content through slots
- Configurable visibility of arrows
Responsive Design:
- Automatically adjusts to container width
- Handles window resize events
- Maintains proper navigation state