Vue Card Carousel

Sliding card carousel for list viewing.

*Please note this is in active development and subject to change until it is out of alpha versions.

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

Sliding card carousel for list viewing with vue