1.0.14 • Published 7 years ago
vue-stacked-carousel v1.0.14
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) |