<template>
<div :class="slideClass" v-show="active">
    <slot></slot>
</div>
</template>

<script>
import {uniqueId} from 'lodash'
export default {
    name: 'CarouselSlide',
    data () {
        return {
            id: uniqueId('slide_'),
            active: false
        }
    },
    computed: {
        slideClass () {
            return 'slide ' + this.$parent.animation
        }
    },
    watch: {
        '$parent.selected' (n, o) {
            this.active = this.id == n
        }
    }
}
</script>
