# @onrewind/krousel

> Javascript carousel library

Latest version **0.4.5** (published 2021-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @onrewind/krousel
pnpm add @onrewind/krousel
yarn add @onrewind/krousel
bun add @onrewind/krousel
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.5 |
| Published | 2021-04-15 |
| First published | 2020-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | On Rewind |
| Maintainers | onrewind-admin |
| Keywords | carousel, slider, javascript |

## Links

- npm: https://www.npmjs.com/package/@onrewind/krousel
- Repository: https://github.com/onrewind/krousel
- Homepage: https://github.com/onrewind/krousel#readme
- Issues: https://github.com/onrewind/krousel/issues
- npm.io page: https://npm.io/package/@onrewind/krousel

## 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

- 0.4.5 (latest) — 2021-04-15
- 0.4.4 — 2021-04-15
- 0.4.3 — 2021-03-16
- 0.4.2 — 2021-03-16
- 0.4.1 — 2021-03-16
- 0.4.0 — 2021-03-16
- 0.3.3 — 2020-10-14
- 0.3.2 — 2020-10-14
- 0.3.1 — 2020-10-13
- 0.3.0 — 2020-10-13
- 0.2.5 — 2020-10-05
- 0.2.4 — 2020-10-05

## README

[![NPM Version](https://badgen.net/npm/v/@onrewind/krousel)](https://www.npmjs.com/package/@onrewind/krousel)
[![Package Size](https://badgen.net/packagephobia/install/@onrewind/krousel)](https://www.npmjs.com/package/@onrewind/krousel)

# krousel

Carousel library with vanilla Javascript

Disclaimer: This library is inspired by [Slick](https://github.com/kenwheeler/slick) which is a jQuery plugin. The goal is to provide a similar utility without the jQuery dependency. The API here is almost the same as Slick's one.

## Installation

```console
$ npm install @onrewind/krousel
```

## Features

- Infinite loop
- Change transition speed & type (slide / fade)
- Autoplay & autoplay speed
- Enable / Disable arrows
- Enable / Disable navigation dots
- Show multiple slides at once
- Slide multiple slides at once
- Responsive: change config using breakpoints
- Change where dots and/or arrows will be inserted
- Use custom arrows

## Options

| Option           | Type                         | Default     | Description                                                                                                                |
| ---------------- | ---------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
| `appendArrows`   | `HTMLElement`                | `null`      | Change where arrows are attached (default is the target)                                                                   |
| `appendDots`     | `HTMLElement`                | `null`      | Change where the navigation dots are attached                                                                              |
| `arrows`         | `boolean`                    | `true`      | enable or disable arrows                                                                                                   |
| `autoplay`       | `boolean`                    | `false`     | Auto play the carousel                                                                                                     |
| `autoplaySpeed`  | `number`                     | `3000`      | Change the interval at which autoplay change slide                                                                         |
| `dots`           | `boolean`                    | `true`      | Display or hide dots                                                                                                       |
| `infinite`       | `boolean`                    | `true`      | Enable or disable infinite behavior                                                                                        |
| `nextArrow`      | `HTMLElement`                | `null`      | Customize the "next" arrow                                                                                                 |
| `pauseOnHover`   | `boolean`                    | `true`      | pause autoplay when a slide is hovered,                                                                                    |
| `prevArrow`      | `HTMLElement`                | `null`      | Customize the "previous" arrow                                                                                             |
| `responsive`     | `Array`                      | `null`      | breakpoints config, [see below](#responsive-option-example)                                                                |
| `slidesToShow`   | `number`                     | `1`         | Number of slide to show at once                                                                                            |
| `slidesToScroll` | `number`                     | `1`         | Number of slide to scroll at once                                                                                          |
| `speed`          | `number`                     | `300`       | transition speed when changing slide                                                                                       |
| `swipe`          | `boolean`                    | `true`      | Enable or disable drag to change slide                                                                                     |
| `transition`     |  one of: `'slide'`, `'fade'` |  `'slide'`  | Change transition type when changing slide<br/>NOTE: transition 'fade' disable options `slidesToShow` and `slidesToScroll` |

#### Responsive option example

The responsive option takes an array of breakpoints, each one should be an object structured as follow:

- `breakpoint` • Number • Screen width at which the breakpoint will be activated
- `settings` • Object • Object containing options that will overwrite initial options

> **LIMITATION**: the `settings` property only accepts overwrites for these options:
>
> `slidesToShow`, `slidesToScroll`, `infinite`
>
> This list could increase over time

Only one breakpoint will be enabled at a time.

```javascript
const options = {
  // [...]
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        infinite: true,
      },
    },
    {
      breakpoint: 400,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
      },
    },
  ],
};
```

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