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 along with the source code.

License

MIT