🎠 Taughtcode React Hero Carousel

A minimal, responsive, and customizable image carousel component built for React — with clean, vanilla CSS and no dependency on any framework or UI library (not even Tailwind).

Perfect for landing pages, portfolios, slideshows, and anywhere you need to show off a sleek image rotation.

✨ Features

✅ Lightweight and dependency-free ✅ Responsive design ✅ Navigation arrows (← / →) ✅ Dots for current slide indicator ✅ Autoplay with customizable interval ✅ Fully customizable via your own CSS ✅ Works in all modern browsers

📦 Installation

npm taughtcode-hero-carousel

Or with yarn:

yarn add taughtcode-hero-carousel

⚙️ Usage

import Carousel from "taughtcode-hero-carousel";
import "taughtcode-hero-carousel/src/carousel.css"; // Import styles

const images = [
  "/images/slide1.jpg",
  "/images/slide2.jpg",
  "/images/slide3.jpg",
];

<Carousel
  images={images}
  autoPlay={true}
  interval={4000}
  showDots={true}
  showArrows={true}
/>;

⚠️ Note about Image Paths

Images must be placed inside the public/ folder of your React project. Example:

your-project/
├── public/
│   └── images/
│       ├── slide1.jpg
│       ├── slide2.jpg
│       └── slide3.jpg

Using public paths like "/images/slide1.jpg" ensures the carousel loads correctly without bundler issues. Relative src/assets imports won't work unless you add extra handling for it.

🧩 Props

| Prop | Type | Default | Description | | ------------ | ---------- | ------- | -------------------------------------------- | | images | string[] | [] | Array of image URLs | | autoPlay | boolean | false | Automatically cycle through images | | interval | number | 3000 | Delay between auto slides (in milliseconds) | | showDots | boolean | true | Show small indicator dots below the carousel | | showArrows | boolean | true | Show next/prev navigation arrows |

🎨 Customization

• The component uses plain CSS (carousel.css) — feel free to override any class using your own styles.
• Class names are prefixed with carousel- to avoid conflicts.
• Animations, transitions, and colors are fully tweakable.

📄 License

MIT — use it freely, modify it, or contribute back 🙌 If you found it useful, consider starring the repo ⭐

💬 Feedback & Contributions

Open to ideas, improvements, and contributions! Open a pull request or reach out on LinkedIn if you’d like to collaborate on cool frontend projects! 🔥