traves-custom-carousel

Custom React Carousel

A highly customizable React carousel component with smooth animations and responsive layouts.

Features

• 🖼️ Hero Carousel - Full-width slider perfect for hero sections with text overlay and CTA buttons
• 🛍️ Product Carousel - Responsive grid layout ideal for showcasing products
• 📱 Fully Responsive - Customize how many items appear on different screen sizes
• 🎭 Animations - Beautiful animations powered by Framer Motion
• 👆 Touch Support - Swipe gestures for mobile devices
• ♿ Accessible - Built with accessibility in mind
• 🔄 Auto Play - Optional auto-rotation with customizable interval

Note: motion is a peer dependency and needs to be installed separately.

Usage

Hero Carousel

import { Carousel } from "react-fluid-carousel";

const App = () => {
  const heroItems = [
    {
      image: "/images/hero1.jpg",
      title: "Welcome to our store",
      description: "Discover amazing products at great prices",
      button: "Shop Now",
    },
    {
      image: "/images/hero2.jpg",
      title: "Summer Collection",
      description: "Check out our latest summer arrivals",
      button: "View Collection",
    },
    // Add more slides as needed
  ];

  return (
    <Carousel
      type="hero"
      items={heroItems}
      autoPlay={true}
      autoPlayInterval={5000}
      showArrows={true}
      showDots={true}
    />
  );
};

Product Carousel

import { Carousel } from "react-fluid-carousel";

const App = () => {
  const productItems = [
    {
      image: "/images/product1.jpg",
      title: "Product 1",
      description: "Product description here",
      price: "$99.99",
      button: "Add to Cart",
    },
    {
      image: "/images/product2.jpg",
      title: "Product 2",
      description: "Product description here",
      price: "$149.99",
      button: "Add to Cart",
    },
    // Add more products as needed
  ];

  return (
    <Carousel
      type="product"
      items={productItems}
      autoPlay={true}
      autoPlayInterval={5000}
      showArrows={true}
      showDots={true}
      itemsPerView={{
        desktop: 4,
        tablet: 2,
        mobile: 1,
      }}
    />
  );
};

Props

Common Props

Prop	Type	Default	Description
type	'hero' | 'product'	'hero'	Type of carousel to render
items	CarouselItem[]	[]	Array of items to display in the carousel
autoPlay	boolean	true	Whether to auto-rotate slides
autoPlayInterval	number	5000	Time in ms between slides when autoPlay is enabled
showArrows	boolean	true	Whether to show navigation arrows
showDots	boolean	true	Whether to show navigation dots

Product Carousel Only

Prop	Type	Default	Description
itemsPerView	{ desktop: number; tablet: number; mobile: number }	{ desktop: 4, tablet: 3, mobile: 1 }	Number of items to show per slide at different breakpoints

Item Structure

interface CarouselItem {
  image?: string; // URL to image
  title?: string; // Item title
  description?: string; // Item description
  button?: string; // Button text (optional)
  price?: string; // Price text (for product carousel)
  [key: string]: any; // Additional custom properties
}

Breakpoints

The responsive breakpoints used are:

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT