# @ds-kit/carousel

> Carousel component

Latest version **3.2.0** (published 2019-08-30) · LicenseRef-LICENSE license · 0 weekly downloads

## Install

```sh
npm install @ds-kit/carousel
pnpm add @ds-kit/carousel
yarn add @ds-kit/carousel
bun add @ds-kit/carousel
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.0 |
| Published | 2019-08-30 |
| First published | 2018-10-17 |
| Weekly downloads | 0 |
| License | LicenseRef-LICENSE |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | LapidusInteractive |
| Maintainers | amytych, lapidus, zimrick |

## Links

- npm: https://www.npmjs.com/package/@ds-kit/carousel
- npm.io page: https://npm.io/package/@ds-kit/carousel

## Recent versions

- 3.2.0 (latest) — 2019-08-30
- 3.1.0 — 2019-08-22
- 3.0.0 — 2019-08-09
- 2.1.0 — 2019-07-29
- 2.0.0 — 2019-06-25
- 1.0.3 — 2019-06-25
- 1.0.2 — 2019-04-29
- 1.0.1 — 2019-04-04
- 1.0.0 — 2019-03-05
- 0.1.1 — 2018-11-16
- 0.1.0 — 2018-10-17

## README

---
title: "Carousel"
slug: "/packages/carousel"
category: "layout"
componentNames:
  - "Carousel"
  - "CarouselItem"
---

# Carousel

The Carousel component can be used to display a set of items in a horizontally scrolling container. This is particularly useful for longer tabs, or similar content that should not take up too much vertical space on mobile.

The carousel is used under the hood in the `TabBar` component, so you can also see it in action in [input patterns](https://ds-kit.netlify.com/pattern-viewer/input-patterns).

```js
import { Carousel, CarouselItem } from "@ds-kit/carousel"
```

## Basic Example

For this simple example we will render a carousel with items of the same width.

```jsx
<Carousel variant="full">
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 1
    </Div>
  </CarouselItem>
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 2
    </Div>
  </CarouselItem>
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 3
    </Div>
  </CarouselItem>
  <CarouselItem>
    <Div width="100%" bg="#EEE" p="1rem">
      Item 4
    </Div>
  </CarouselItem>
</Carousel>
```

## Variable widths

A carousel with variable width items.

```jsx
<Carousel variant="full">
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      Variable widths
    </Div>
  </CarouselItem>
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      Small
    </Div>
  </CarouselItem>
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      Longer components are possible too
    </Div>
  </CarouselItem>
  <CarouselItem width="auto">
    <Div bg="#EEE" p="1rem">
      This will only scroll when it's longer than the container
    </Div>
  </CarouselItem>
</Carousel>
```

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