tailwind-carousel

Tailwind Carousel

A lightweight, dependency-free carousel component for React and Next.js projects.

Installation

npm install tailwind-carousel

Features

• Lightweight (~6KB)
• No Tailwind dependency required
• Auto-play support
• Navigation arrows
• Dot indicators
• Mobile responsive
• Touch swipe support
• Customizable styling

Usage

import TailwindCarousel from 'tailwind-carousel';

function App() {
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  return (
    <TailwindCarousel
      images={images}
      width="600px"
      height="400px"
      carusal_cover={true}
      arrowVisible={true}
      pageIndicator={true}
    />
  );
}

Props

Prop	Type	Default	Description
images	string[]	required	Array of image URLs
width	string	'100%'	Carousel width (e.g., '600px', '80%')
height	string	'300px'	Carousel height (e.g., '400px')
carusal_cover	boolean	true	Image covers area (cover) or fits inside (contain)
arrowVisible	boolean	false	Show navigation arrows
hideArrowForMobile	boolean	false	Hide arrows on mobile screens
pageIndicator	boolean	false	Show dot indicators
timespace	number	-	Auto-play interval in milliseconds
style	object	-	Additional inline styles for container

Examples

Basic Carousel

<TailwindCarousel
  images={images}
  width="600px"
  height="300px"
/>

With All Options

<TailwindCarousel
  images={images}
  width="80%"
  height="400px"
  carusal_cover={true}
  arrowVisible={true}
  hideArrowForMobile={true}
  pageIndicator={true}
  timespace={2000}
/>

Auto-play Only

<TailwindCarousel
  images={images}
  width="600px"
  height="300px"
  arrowVisible={false}
  pageIndicator={false}
  timespace={1500}
/>

Demo

https://codesandbox.io/s/tailwind-carousel-46713p

Author

@harshendra1998