Ellipse Carousel

Component 78

About

Elliptical card carousel with autoplay, drag interaction, position-based scaling, mobile-specific ellipse tuning, and an optional center label.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ellipse Carousel to your project and fits it to your theme.

Code

How Ellipse Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import EllipseCarousel from "@/components/ui/ellipse-carousel";

export default function EllipseCarouselDemo() {
  return (
    <div className="w-full">
      <EllipseCarousel
        backgroundColor="#eeeeee"
        centerLabel="Ellipse Carousel"
        showCenterLabel
        cardWidth={130}
        cardHeight={180}
        minScale={0.4}
        radiusXRatio={0.25}
        radiusYRatio={0.36}
        autoPlay
        holdDuration={1}
        stepDuration={0.7}
        pauseOnHover
        draggable
        dragSensitivity={1}
      />
    </div>
  );
}