Loading challenge...
Carousel
Navigate through image carousel with controls
Carousel Controls
Toggle autoplay and view current slide
Current slide: 1 / 5
Interactive Carousel
Navigate with arrows, dots, keyboard, or swipe
Slide 1
First slide content
Slide 2
Second slide content
Slide 3
Third slide content
Slide 4
Fourth slide content
Slide 5
Fifth slide content
Navigation Methods
Multiple ways to navigate the carousel
- ✓Click arrow buttons to navigate between slides
- ✓Click dots to jump to specific slides
- ✓Use keyboard arrows (← →) for navigation
- ✓Swipe left/right on touch devices
- ✓Hover to pause autoplay, leave to resume
Testing Tips
Automation hints
- ✓ Use [data-testid="prev-button"] and [data-testid="next-button"] for navigation
- ✓ Check [data-testid="current-slide"] for current slide number
- ✓ Verify [data-active="true"] on dots and slides for active state
- ✓ Test keyboard navigation with page.keyboard.press('ArrowLeft'/'ArrowRight')
- ✓ Disable autoplay via [data-testid="autoplay-toggle"] for deterministic testing
