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 (513 forks)batch import
help wantedquestion

Repository metrics

Stars
 (1,705 stars)
PR merge metrics
 (No merged PRs in 30d)

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