# tailwind-carousel

> this library makes easy to add carousel in project where tailwind is already in use

Latest version **1.0.32** (published 2026-03-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install tailwind-carousel
pnpm add tailwind-carousel
yarn add tailwind-carousel
bun add tailwind-carousel
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.32 |
| Published | 2026-03-22 |
| First published | 2022-04-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Harshendra Prajapati |
| Maintainers | harshendra_prajapati |
| Keywords | carousel, slider, image, animation |

## Links

- npm: https://www.npmjs.com/package/tailwind-carousel
- Repository: https://github.com/harshendra1998/tailwind-carousel
- Homepage: https://github.com/harshendra1998/tailwind-carousel#readme
- Issues: https://github.com/harshendra1998/tailwind-carousel/issues
- npm.io page: https://npm.io/package/tailwind-carousel

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.32 (latest) — 2026-03-22
- 1.0.31 — 2026-03-22
- 1.0.29 — 2026-03-22
- 1.0.25 — 2026-03-22
- 1.0.24 — 2026-03-22
- 1.0.23 — 2026-03-22
- 1.0.22 — 2022-04-24
- 1.0.21 — 2022-04-24
- 1.0.20 — 2022-04-24
- 1.0.19 — 2022-04-24
- 1.0.18 — 2022-04-23
- 1.0.17 — 2022-04-22
- 1.0.16 — 2022-04-22
- 1.0.15 — 2022-04-22
- 1.0.14 — 2022-04-22
- … 13 more at https://npm.io/package/tailwind-carousel/versions

## README

# Tailwind Carousel

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

## Installation

```bash
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

```jsx
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
```jsx
<TailwindCarousel
  images={images}
  width="600px"
  height="300px"
/>
```

### With All Options
```jsx
<TailwindCarousel
  images={images}
  width="80%"
  height="400px"
  carusal_cover={true}
  arrowVisible={true}
  hideArrowForMobile={true}
  pageIndicator={true}
  timespace={2000}
/>
```

### Auto-play Only
```jsx
<TailwindCarousel
  images={images}
  width="600px"
  height="300px"
  arrowVisible={false}
  pageIndicator={false}
  timespace={1500}
/>
```

## Demo

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

## Author

[@harshendra1998](https://www.github.com/harshendra1998)

---
_Source: https://npm.io/package/tailwind-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._