vue之3D移動端滑動效果
阿新 • • 發佈:2019-02-05
npm install -S vue-carousel-3d
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
components: {
Carousel3d,
Slide
}
};
const slides = [
{
title: 'Slide 1',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 2',
desc: 'Lorem ipsum dolor sit amet ',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 3',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 4' ,
desc: 'Lorem ipsum dolor sit amet, Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 5',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 6' ,
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 7',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 8',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 9',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
},
{
title: 'Slide 10',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
src: 'https://placehold.it/360x270'
}
]
使用方法
<carousel-3d :count="discountLists.length">
<slide v-for="(slide, i) in discountLists" :index="i" :key="i">
<template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
<img :data-index="index" :class="{ current: isCurrent, onLeft: (leftIndex >= 0), onRight: (rightIndex >= 0) }" :src="getImgURL(slide.fileId, 'MIDDLE_LOGO')">
</template>
</slide>
</carousel-3d>
此文為轉載,但是忘記轉的哪個的了==