# vue-simple-carousel

> Simple carousel slider for Vue.js 3

Latest version **1.1.0** (published 2021-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-simple-carousel
pnpm add vue-simple-carousel
yarn add vue-simple-carousel
bun add vue-simple-carousel
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-05-13 |
| First published | 2019-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 796 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nikita Umnov |
| Maintainers | nomnes |
| Keywords | vue, vue 3, carousel, slider, simple, component |

## Links

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

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.0.11

## 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.1.0 (latest) — 2021-05-13
- 1.0.1 — 2021-05-05
- 1.0.0 — 2021-04-19
- 0.4.4 — 2021-04-18
- 0.4.3 — 2020-02-08
- 0.4.2 — 2020-02-08
- 0.4.1 — 2020-02-08
- 0.4.0 — 2020-01-29
- 0.3.9 — 2019-11-24
- 0.3.8 — 2019-10-03
- 0.3.7 — 2019-10-03
- 0.3.6 — 2019-09-30
- 0.3.5 — 2019-09-30
- 0.3.4 — 2019-08-19
- 0.3.3 — 2019-08-19
- … 10 more at https://npm.io/package/vue-simple-carousel/versions

## README

# vue-simple-carousel

Simple carousel slider for Vue.js 3

## Installation

```
npm install vue-simple-carousel
```

or

```
yarn add vue-simple-carousel
```

## Usage

```html

<template>
  <simple-carousel :items="photos">
    <template #default="{ item, index }">
      <img :src="item" :alt="index">
    </template>
  </simple-carousel>
</template>

<script>
import SimpleCarousel from 'vue-simple-carousel';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    SimpleCarousel,
  },
  setup() {
    return {
      photos: [
        'https://via.placeholder.com/150/0000FF/808080?Text=Test%20Image%201',
        'https://via.placeholder.com/150/FF0000/FFFFFF?Text=Test%20Image%202',
        'https://via.placeholder.com/150/FFFF00/000000?Text=Test%20Image%203',
        'https://via.placeholder.com/150/000000/FFFFFF/?text=Test%20Image%204',
      ]
    }
  }
});
</script>
```

### SimpleCarouselContainer props

Attribute | Type | Default | Description
:---|:---:|:---:|:---
**items** | *Array* | | List of slides (**_required_**)
**modelValue** | *Number* | *0* | Current slide index
**perPage** | *Number* / *[Number, Number][]* | *
1* | Number of slides per page. `:per-page="3"` or `:per-page=[[640, 2], [720, 3]]` for several endpoints
**slideByItem** | *Boolean* | *false* | Slide by **one** item if `true`, or by full page if `false`
**loop** | *Boolean* | *false* | Flag to make the carousel loop around when it reaches the end.
**adjustable** | *Boolean* | *false* | Adjust the height of the wrapper to the height of the visible slides
**sideNav** | *Boolean* | *false* | Show side navigation buttons
**pages** | *Boolean* | *false* | Show pages navigation
**dots** | *Boolean* | *false* | Show dots navigation

### SimpleCarouselContainer events

Event name | Description | Parameter
:---|:---|:---:
**update:modelValue** | Emitted when current index changed | Current index `Number`
**change-per-page** | Emitted when current per page number changed | Current per page number `Number`

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