SSENSE/vue-carousel

Question: How to retain the slide pagination position?

Open

#226 opened on Jun 25, 2018

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
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>

Contributor guide