# carousel-view

> a responsive & lightweight carousel component for vue

Latest version **0.0.2** (published 2020-08-31) · MIT license · 0 weekly downloads

## Install

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

## 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.0.2 |
| Published | 2020-08-31 |
| First published | 2020-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | litt1e-p |
| Maintainers | litt1e-p |
| Keywords | carousel-view, carousel, swiper, slider, auto height, auto width, lightweight, swipe, vue |

## Links

- npm: https://www.npmjs.com/package/carousel-view
- Repository: https://github.com/litt1e-p/carouselView
- Homepage: https://github.com/litt1e-p/carouselView#readme
- Issues: https://github.com/litt1e-p/carouselView/issues
- npm.io page: https://npm.io/package/carousel-view

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.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

- 0.0.2 (latest) — 2020-08-31
- 3.0.0 (next) — 2021-11-01
- 0.0.1 — 2020-08-28

## README

# CarouselView

#### Installation

```js
npm i carousel-view
```

#### Usage

1. Global registration

You may install Vue Carousel globally:

```js
// in main.js
import CarouselView from 'carousel-view'
import 'carousel-view/dist/style/carousel-view.css'

Vue.use(CarouselView)
```

2. Local component

Include the carousel directly into your component using import:

```js
// in your vue file
import { CarouselView } from 'carousel-view'
import 'carousel-view/dist/style/carousel-view.css'

export default {
  components: {
    CarouselView
  }
  ...
}
```

#### HTML Structure

```html
<carousel-view>
    ...your dom
</carousel-view>
```

#### Configuration

| Property | Type | Default | Description |
| ---------- |:----------:| ----------:| ----------:|
| direction  | enum(horizontal/vertical) | 'horizontal' | direction for carousel |
| loop | Boolean | true | Flag to make the carousel loop around when it reaches the end |
| autoHeight | Boolean | true | Adjust the height of the carousel for the current slide. |
| autoWidth | Boolean | false | Adjust the width of the carousel for the current slide. |
| mousewheelControl | Boolean | true | enable mousewheel control |
| paginationVisible | Boolean | true | visibility of pagination |
| paginationClickable | Boolean | true | carousel control via pagination click |
| speed | Number | 300 | animation speed |
| indicatorColor | String | rgba(153, 153, 153, 0.5) | color of indicator |
| indicatorTintColor | String | #007aff | tint color of indicator |
...

<!-- #### Screenshots -->

<!-- ![](./screenshots/img@2x.png) -->

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