SSENSE/vue-carousel

Question: How to retain the slide pagination position?

Aberta

#226 aberto em 25 de jun. de 2018

 (5 comentários) (0 reação) (0 responsável)JavaScript (513 forks)batch import
help wantedquestion

Métricas do repositório

Stars
 (1.705 estrelas)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 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>

Guia do colaborador