# @projectfive/v-imagecarousel

> Vue3 ImageCarousel component

Latest version **1.0.3** (published 2021-06-10) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @projectfive/v-imagecarousel
pnpm add @projectfive/v-imagecarousel
yarn add @projectfive/v-imagecarousel
bun add @projectfive/v-imagecarousel
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-06-10 |
| First published | 2021-02-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Project Five |
| Maintainers | duncank |

## Links

- npm: https://www.npmjs.com/package/@projectfive/v-imagecarousel
- npm.io page: https://npm.io/package/@projectfive/v-imagecarousel

## Recent versions

- 1.0.3 (latest) — 2021-06-10
- 1.0.2 — 2021-06-10
- 1.0.1 — 2021-04-21
- 1.0.0 — 2021-02-19

## README

# Image carousel

### Installation
`npm install @projectfive/v-imagecarousel`

## Props
-  items: (object[]) - list of items. For usage with images with the default slot, include a `src` key. `alt` and `title` keys are supported by default as well.

## Slots
- item - default = image, but every element can be provided. Slotprops: `{ item }` - provided object.
- next - default = `>` - contents of next arrow button
- prev - default = `<` - contents of prev arrow button

## Example
```html
<ImageCarousel
    :items="[{ src: 'img1.jpg', title: '1' }, { src: 'img2.jpg', title: '2' }]"
    class="ratio-16by9"
>
    <template v-slot:item="{ item }"}>
        <div>
            <img :src="item.src" />
            {{ item.title }}
        </div>
    </template>
    <template v-slot:next>
        <icon>chevron-right</icon>
    </template>
    <template v-slot:prev>
        <icon>chevron-left</icon>
    </template>
</ImageCarousel>
```

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