import { useEffect, useRef, useState } from 'react'; export default function AppleCardsCarousel({ items = [], className = '', }) { const containerRef = useRef(null); const [active, setActive] = useState(0); const scrollToIndex = (index) => { const el = containerRef.current?.children[index]; if (!el) return; el.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }); setActive(index); }; // detect centered card while scrolling const handleScroll = () => { const container = containerRef.current; if (!container) return; const center = container.scrollLeft + container.offsetWidth / 2; let closest = 0; let minDist = Infinity; [...container.children].forEach((child, i) => { const childCenter = child.offsetLeft + child.offsetWidth / 2; const dist = Math.abs(center - childCenter); if (dist < minDist) { minDist = dist; closest = i; } }); setActive(closest); }; // keyboard navigation useEffect(() => { const key = (e) => { if (e.key === 'ArrowRight') scrollToIndex(Math.min(active + 1, items.length - 1)); if (e.key === 'ArrowLeft') scrollToIndex(Math.max(active - 1, 0)); }; window.addEventListener('keydown', key); return () => window.removeEventListener('keydown', key); }, [active, items.length]); return (

{items.map((item, i) => (

{item.title}

{item.description}

))}

); }

Components

Apple Cards Carousel

Installation

Tailwind Setup