taughtcode-hero-carousel

🎠 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! 🔥