# vue-card-carousel

> A flexible, touch-focused wrapper element that displays cards in a carousel-like manner.

Latest version **1.0.0** (published 2020-05-24) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-05-24 |
| First published | 2020-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | doug@thierjung.net |
| Maintainers | thequail13 |
| Keywords | vue, cards, carousel, slide, swipe |

## Links

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

## 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.0 (latest) — 2020-05-24
- 0.2.2 — 2020-04-15
- 0.2.1 — 2020-04-08
- 0.1.2 — 2020-03-28
- 0.1.1 — 2020-03-28
- 0.1.0 — 2020-03-28

## README

<h1 align="center">Vue Card Carousel</h1>

<p align="center">
  <img src="https://img.shields.io/npm/v/vue-card-carousel.svg">
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/vue-card-carousel.svg">
</p>

# Installation

```
npm i vue-card-carousel
```

You can choose to install either globally or locally:

Globally:

```
import Vue from 'vue'
import App from './App.vue'
import VueCardCarousel from "vue-card-carousel";

Vue.use(VueCardCarousel)

new Vue({
  el: '#app',
  render: h => h(App)
})
```

or locally to a component:

```
import { VueCardCarousel } from "vue-card-carousel";

export default {
    components: {
        VueCardCarousel
    }
}
```

# Usage

Most basic usage would be adding the component and passing in the array of items you want displayed. **Note you will need to set the minimum height of the component, otherwise it won't display. The width will take up 100% by default. These can be easily configured via CSS.**

```
<template>
  <div id="app">
    <VueCardCarousel class="vcc" :items="listOfTodos" />
  </div>
</template>

<script>
import { VueCardCarousel } from "vue-card-carousel";

export default {
  components: {
    VueCardCarousel
  },
  data() {
    return {
      listOfTodos: [{ id: 1 }, { id: 2 }, { id: 3 }]
    };
  }
};
</script>

<style scoped>
  .vcc {
    height: 50vh;
    width: 60vw;
  }
</style>
```

However this will be relatively uninteresting. To make the most use of this component, you'll want to add customizations via props and slots like below:

```
<template>
  <div id="app">
    <VueCardCarousel
      class="vcc"
      :items="listOfTodos"
      :header-options="headerOpt"
      :footer-options="footerOpt"
    >
      <template v-slot:header="slotProps">
        <strong>Header. Id: {{ slotProps.headerProp.id }}</strong>
      </template>
      <template v-slot:default="slotProps">
        <div v-for="n in 5" :key="n">
          {{ slotProps.bodyProp.cMainId }}. Hello from the Parent.
        </div>
      </template>
      <template v-slot:footer="slotProps">
        <strong>Footer. Id: {{ slotProps.footerProp.id }}</strong>
      </template>
    </VueCardCarousel>
  </div>
</template>

<script>
import { VueCardCarousel } from "vue-card-carousel";

export default {
  components: {
    VueCardCarousel
  },
  data() {
    return {
      listOfTodos: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
      headerOpt: { isVisible: true, backgroundColor: "green" },
      footerOpt: { isVisible: false }
    };
  }
};
</script>

<style scoped>
  .vcc {
    height: 50vh;
    width: 60vw;
  }
</style>
```

# Props

|     Property      |  Type   | Default | Required | Description                                                                           |
| :---------------: | :-----: | :-----: | :------: | :------------------------------------------------------------------------------------ |
|      `items`      |  Array  |         |   true   | List of items to used to generate the scrollable cards.                               |
|   `startIndex`    | Number  |    0    |  false   | Index of the card you want to be centered on first. Removes trailing digits if found. |
|  `hideBackdrop`   | Boolean |  false  |   true   | Shows/hides the backdrop. Akin to a modal backdrop.                                   |
| `sideCardOpacity` | Number  |  0.25   |  false   | Sets the minimum opacity for the cards on either side of the center card.             |
|  `headerOptions`  | Object  |         |  false   | See details below for available properties.                                           |
|  `footerOptions`  | Object  |         |  false   | See details below for available properties.                                           |

## headerOptions

|     Property      |  Type   | Default | Required | Description                                      |
| :---------------: | :-----: | :-----: | :------: | :----------------------------------------------- |
|    `isVisible`    | Boolean |         |   true   | Controls whether or not the header is displayed. |
| `backgroundColor` | String  |         |  false   | Any valid CSS color.                             |

## footerOptions

|     Property      |  Type   | Default | Required | Description                                      |
| :---------------: | :-----: | :-----: | :------: | :----------------------------------------------- |
|    `isVisible`    | Boolean |         |   true   | Controls whether or not the footer is displayed. |
| `backgroundColor` | String  |         |  false   | Any valid CSS color.                             |

# Slots

Scoped slots are exposed for each sub-section of the card: header, body, and footer. Each slot has slot props which give access to the individual item from the list that was passed in through the `items` property, so you can use that data to fully customize the card.

|   Name    |                            Description                            | Scope        |
| :-------: | :---------------------------------------------------------------: | :----------- |
| `header`  | Individual item from the list passed in through the `items` prop. | `headerProp` |
| `default` | Individual item from the list passed in through the `items` prop. | `bodyProp`   |
| `footer`  | Individual item from the list passed in through the `items` prop. | `footerProp` |

In the above example, we have named the object containing all our slot props slotProps, but you can choose to call this anything. More info can be found here: https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

# Demo

Interactive demo located [here](https://thequail13.github.io/vue-card-carousel/) along with the [source code](https://github.com/TheQuail13/vue-card-carousel-demo).

## License

[MIT](http://opensource.org/licenses/MIT)

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