feat: add carousel component#23
Conversation
Removed unused setCardSource function from ImageCarousel.
|
Currently in ImageCarousel.tsx:150, the use of Image expects CarouselCard objects to hold valid sources to images. If this is not the case, the current code does not fallback to any default images/DOM elements. I will fix this when I have the time, but if anyone is able handle this prior to merging, that would be great. |
sebastian-noel
left a comment
sebastian-noel
left a comment
There was a problem hiding this comment.
Fixed the error handling issue, otherwise... LGTM!
There was a problem hiding this comment.
Pull request overview
Adds a new client-side ImageCarousel component and wires it into AboutSection to display a set of static “About” cards with optional autoplay and animated transitions.
Changes:
- Added
components/ImageCarousel.tsx(animated carousel with arrows + dots, optional autoplay, multi-card viewport). - Updated
components/AboutSection.tsxto define static carousel card data and render the carousel.
Reviewed changes
Copilot reviewed 2 out of 5 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| components/ImageCarousel.tsx | New animated carousel component with autoplay, navigation controls, and image fallback handling. |
| components/AboutSection.tsx | Adds static card data and renders ImageCarousel in the About section. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="flex gap-2" role="tablist" aria-label="Carousel navigation"> | ||
| {cards.map((_, i) => ( | ||
| <button | ||
| key={i} | ||
| role="tab" | ||
| aria-selected={i === currentIndex} | ||
| aria-label={`Go to card ${i + 1}`} |
| /** | ||
| * Static card data | ||
| * TODO: replace placeholderClass with a real images | ||
| */ |
| const startAutoPlay = useCallback(() => { | ||
| if (!autoPlay) return; | ||
| intervalRef.current = setInterval(() => { | ||
| setDirection(1); | ||
| setCurrentIndex((prev) => (prev + 1) % cards.length); | ||
| }, intervalMs); | ||
| }, [autoPlay, cards.length, intervalMs]); | ||
|
|
||
| const stopAutoPlay = useCallback(() => { | ||
| if (intervalRef.current) clearInterval(intervalRef.current); | ||
| }, []); |
Pull Request
Description
Adds ImageCarousel component and uses it in AboutSection.tsx.
Type of Change
feat: New featurefix: Bug fixchore: Maintenance (dependencies, config, etc.)docs: Documentation onlystyle: Code style (formatting, no logic change)refactor: Code refactor (no new feature or fix)Changes Made
Screenshots (if applicable)
feature_add-carousel-component.mp4
Checklist
npm run lintpasses without errorsnpm run buildcompletes successfullyRelated Issues