<template>
<div style="height:2000px;" >
<h3>src/components/Home.vue</h3>
<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>