SSENSE/vue-carousel
View on GitHubQuestion: How to retain the slide pagination position?
Open
#226 opened on Jun 25, 2018
help wantedquestion
Description
For example, I have 5 slides on the home page, each image per slide, and I move to the third slide and go to another page, I want to see that the carousel is still showing the third slide when I come back to home page.
I tried to wrap the carousel component within a keep alive tag, that didn't work. I didn't enable autoplay either (btw, I saw someone mentioned that autoplay, but I didn't see that was documented in here).
Is this something I can achieve by using the API from this plugin?
Here is the code snippet.
<template>
<carousel v-if="imgSrcs.length" class="carousel"
:navigationEnabled="true"
:perPage="1"
:perPageCustom="[[480,1],[768,2],[1200,3]]">
<slide v-for="(imgSrc, index) in imgSrcs" :key="index">
<img :src=imgSrc>
<div class="overlay">
<p>this image url is: {{ imgSrc }}</p>
</div>
</slide>
</carousel>
</template>
<script>
import { mapGetters } from "vuex"
export default {
data () {
return {
slug: this.$route.params.slug ? this.$route.params.slug : "home",
imgSrcs: []
}
},
components: {
...ComponentsList
},
mounted () {
setTimeout( () => {
this.imgSrcs = [
"https://placeimg.com/640/480/animals/1",
"https://placeimg.com/640/480/animals/2",
"https://placeimg.com/640/480/animals/3",
"https://placeimg.com/640/480/animals/4",
"https://placeimg.com/640/480/animals/5",
"https://placeimg.com/640/480/animals/6",
]
}, 0);
},
computed: {
...mapGetters(['allPagesData', 'currentPageData']),
},
watch: {
'$route' (to, from) {
if (to.params.hasOwnProperty("slug")) {
this.slug = to.params.slug
} else {
this.slug = "home"
}
},
}
}
</script>