Swipi is a headless carousel for React. One hook gives you the engine
— drag, momentum, snapping, looping, autoplay — and hands back a ref and a
small object of state. The markup, the CSS and the accessibility stay yours, so
nothing of ours ends up in your DOM and there is no stylesheet to import.
It weighs 5.1 KB gzipped — 1.85× less than
embla-carousel-react with its autoplay plugin, measured through the
same build in
SIZE.md.
> Upgrading from Swipi 2? The `` component and its ~30 props are gone in
> 3.0 —
> [MIGRATION.md](https://github.com/midstem/swipi/blob/main/MIGRATION.md) maps
> every one of them to a hook option or a line of CSS.
### Installation
**npm**
```bash
$ npm install swipi
```
**yarn**
```bash
$ yarn add swipi
```
## 🔥 View more examples and create a custom slider
## **Basic Usage**
Wiring is a single ref on the viewport. The track is its only child and the
slides are the children of the track.
### The markup
```tsx
import { useSwipiCarousel } from 'swipi'
export const Carousel = ({ items }) => {
const [carouselRef, carousel] = useSwipiCarousel({ loop: true })
return (
<>
{items.map((item) => (
{item.title}
))}
)
}
```
### The classes
Those three class lists are a contract, not decoration — the geometry depends on
them. Two of them are yours to tune: `basis-1/2` sets how many slides are
visible, and the `pl-3` on the slide with the matching `-ml-3` on the track sets
the space between them. Everything else on the page is styling you own.
Not using Tailwind? Our documentation provides examples using both Tailwind and plain CSS.
## **Documentation**
For advanced usage, available options, responsive layout specifics, state management, and accessibility guidelines, please refer to our full documentation at [https://swipi.midstem.net/docs/](https://swipi.midstem.net/docs/).
---
_Source: https://npm.io/package/swipi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
