Skip to content

droidbg/react-carousel

Repository files navigation

🔄 React Carousel / Card Slider Package with Animation and different backgrounds

A beautiful, customizable card slider/carousel component for React. Built with Tailwind CSS, Framer Motion, and Parcel for modern bundling. Download Carousel Package from Here.

Check out the demo here.

react_carousal_demo


🚀 Features

  • Smooth scroll animation
  • Left/Right arrow controls
  • Custom card styles
  • Responsive design
  • Dynamic props (title, category, gradient, link)

📦 Installation

npm install react-carousel-latest

Usage

import CardSlider from "react-carousel-latest";

<CardSlider
  shape="star" // Background icons
  randomBackground={true} // Background color random or fixed
  slides={[
    {
      title: "Shooting Star",
      category: "Astronomy",
      description: "Catch the next meteor shower in style.",
      link: "https://google.com", //Open Link on click of the button
    },
    {
      title: "Star Chef",
      category: "Food",
      description: "A recipe that’s out of this world.",
      // If no Link is provided Card is not clickable
    },
    {
      title: "Rising Star",
      category: "Entertainment",
      description: "Meet the actor taking Hollywood by storm.",
      link: githubLink,
    },
  ]}
/>;

Background Icons Available

// shapesAvaiable = "blob" | "heart" | "star" | "bear" | "music" | "trophy" | "ring";
// By default blob shape is given.