vue-stacked-carousel

css customizable stacked carousel, Live Demo

Installation

# install dependencies
npm install vue2-touch --save

npm install vue-stacked-carousel --save

Basic Usage

Use Vue2Touch

import Vue2Touch from 'vue2-touch'
Vue.use(Vue2Touch)

import { VueStackedCarousel } from 'vue-stacked-carousel';

export default {
  components: {
    VueStackedCarousel
  }
};

<vue-stacked-carousel :items="vueStackedCarouselItems">
  <div slot-scope="{ item, index, opacity }" class="card">
    <div class="inner-card" :style="`opacity: ${opacity}`">
      <h3>{{item.title}}</h3>
      <p>{{item.description}}</p>
      <span>item - {{index}}</span>
    </div>
  </div>
  <span slot="arrow-left">arrow</span>
  <span slot="arrow-right">arrow</span>
</vue-stacked-carousel>

data() {
  return {
    vueStackedCarouselItems: [
      {
        title: 'A',
        description: 'Something else here',
      },
      {
        title: 'B',
        description: 'Something else here',
      },
      {
        title: 'C',
        description: 'Something else here',
      },
      {
        title: 'D',
        description: 'Something else here',
      },
      {
        title: 'E',
        description: 'Something else here',
      },
    ],
  };
},

<style>
  .card {
    width: 327px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }
  .inner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    transition: opacity .3s linear;
    user-select: none;
  }
  .vue-stacked-carousel-arrow.arrow-left {
    left: -70%;
  }
  .vue-stacked-carousel-arrow.arrow-right {
    right: -70%;
  }
</style>

Props

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ------------------ | | items | Array | true | Your array with data | | itemDepthRatio | Number | | Depth in pixels from each item default (120px)| | itemDistance | Number | | Distance in pixels between each item default (60px) | | transitionDuration | Number | | Duration of animation between items (0.3 default) | | transitionWait | Boolean | | Default is (true), if set to false, it will not wait the transition to end on arrow click| | transitionTimingFunction | String | | default (ease-in-out) | | arrowLeftClass | String | | default (arrow-left) | | arrowRightClass | String | | default (arrow-right) |

Author

© [Georgi Antonov]