# vue-smart-carousel

> A smart vue carousel component

Latest version **1.0.3** (published 2019-04-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-smart-carousel
pnpm add vue-smart-carousel
yarn add vue-smart-carousel
bun add vue-smart-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 | 1.0.3 |
| Published | 2019-04-12 |
| First published | 2019-04-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Boris Graeff |
| Maintainers | boris.graeff |
| Keywords | vue, smart, carousel, async, viewport |

## Links

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

## Dependencies (1)

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

## 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.0.3 (latest) — 2019-04-12
- 1.0.2 — 2019-04-12
- 1.0.1 — 2019-04-11
- 0.0.1 — 2019-04-11

## README

# vue-smart-carousel
A smart vue carousel component :

- Only mount first slide at creation and mount others only when carousel enter in viewport => improve first rendering and assets loading.
- Start sliding only when the carousel is visible on screen
- Responsive


**⚠️ VueSmartCarousel uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect if carousel is visible on screen. This API is [not fully supported by all browser](http://caniuse.com/#feat=intersectionobserver) but a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) is available.**

## Installation

``` bash
npm install vue-smart-carousel
```


## Usage

``` js
<template>
  <vue-smart-carousel>
    <img src="/image-1.jpg" />
    <img src="/image-2.jpg" />
    <img src="/image-3.jpg" />  
  </vue-smart-carousel>
</template>

<script>
  import VueSmartCarousel from 'vue-smart-carousel'
  export default {
    ...
    components: {
      VueSmartCarousel
    }
  }
</script>
```

## Properties

| Property | Type    | Default | Description |
|:---------|:--------|:--------|:------------|
| value    | Number  | 0       | Current index position (you can use v-model to keep it sync) |
| delay    | Number  | 3000    | Delay between slide transition in milliseconds |


## Examples
    
Take a look to demo file to get examples of navigation and pagination implementations.

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