vue-stacked-carousel

1.0.14 • Public • Published

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]

Package Sidebar

Install

npm i vue-stacked-carousel

Weekly Downloads

4

Version

1.0.14

License

MIT

Unpacked Size

72.9 kB

Total Files

4

Last publish

Collaborators

  • fluksikarton