Home.vue

<template>
    <div style="height:2000px;" >
        <h3>src/components/Home.vue</h3>

        <!-- <vueper-slides autoplay>
            <vueper-slide v-for="tmp in state.slides" :key="tmp" :title="tmp.title" :image="tmp.image"></vueper-slide>
        </vueper-slides> -->

        <vueper-slides ref="myVueperSlides" :parallax="parallax" fixed-height="1500px">
            <vueper-slide
                v-for="tmp1 in par.pics" :key="tmp1" :title="tmp1.title"
                :image="tmp1.image" />
        </vueper-slides>
    </div>
</template>

<script>
import { VueperSlides, VueperSlide } from 'vueperslides';
import 'vueperslides/dist/vueperslides.css';

export default {
    components: {
        VueperSlides, VueperSlide
    },

    data: () => ({
    parallax: 1,
    parallaxFixedContent: false
    }),

    setup () {
        const state = {
            slides: [
                { title: 'a', image: 'http://picsum.photos/500/300?image=112' },
                { title: 'b', image: 'http://picsum.photos/500/300?image=215' },
                { title: 'c', image: 'http://picsum.photos/500/300?image=7' }
            ]
        }
        const par = {
            pics: [
                { title: 'a', image: require('../assets/4kv.jpg') },
                { title: 'b', image: require('../assets/img2.jpg') },
                { title: 'c', image: require('../assets/4kv2.jpg') }
            ]
        }

        return { state, par }
    }
}
</script>

<style lang="scss" scoped>

</style>