Carousel Component

Overview

The Carousel component is a responsive and interactive slider that supports touch gestures, auto-rotation, and custom content. Perfect for testimonials, product showcases, or any sliding content.

Live Demo

Trusted by Industry Leaders

Hear what our customers have to say about their experience with our platform.

SJ

Sarah Johnson

CEO, Tech Innovators

“This platform completely transformed our business operations. The analytics dashboard alone saved us countless hours of manual work.”

Usage

Import and use the Carousel component in your pages:

import { Carousel } from "@/components/landing/Carousel";


export default function YourPage() {
  return (
    <div>
      <Carousel />
    </div>
  );
}

Features

Touch gesture support for mobile devices

Automatic rotation with configurable interval

Navigation buttons and slide indicators

Smooth animations and transitions

Fully responsive design

Customization

The carousel content can be customized by modifying the testimonials array:

const testimonials = [
  {
    name: "Sarah Johnson",
    role: "CEO, Tech Innovators",
    quote: "This platform completely transformed our business operations...",
    avatar: "SJ",
    rating: 5,
  },
  // Add more testimonials...
];

Implementation Details

The carousel uses React hooks for state management:

  • useState for tracking the active slide and animation state
  • useCallback for memoizing navigation functions
  • useEffect for setting up the auto-rotation timer

Touch gesture handling implementation:

const handleTouchStart = (e: React.TouchEvent) => {
  setTouchStart(e.targetTouches[0].clientX);
};


const handleTouchMove = (e: React.TouchEvent) => {
  setTouchEnd(e.targetTouches[0].clientX);
};


const handleTouchEnd = () => {
  if (touchStart - touchEnd > 150) {
    handleNext();
  }
  if (touchStart - touchEnd < -150) {
    handlePrev();
  }
};

Need help customizing the carousel? Check out our components guide or view other components.