v-carousel.vue

<script>
    export default {
        props: {
            'slides': {
                type: Array,
                required: true,
            }
        },
        data () {
            return {
                carousel: this.slides,
                active: this.slides[0] ? this.slides[0].id : null,
            }
        },
        methods: {
            next() {
                const first = this.carousel.shift()
                this.carousel = this.carousel.concat(first)
                this.active = this.carousel[0].id
            },
            previous() {
                const last = this.carousel.pop()
                this.carousel = [last].concat(this.carousel)
                this.active = this.carousel[0].id
            }
        }
    }
</script>
<template>
    <div style="width: 100%; overflow: hidden">
        <transition
            mode="out-in"
            name=""
            enter-active-class="animated fadeInLeft"
            leave-active-class="animated fadeOutRight"
            tag="div"
        >
            <div
                v-for="(slide) in carousel"
                :key="slide.id"
                v-if="active === slide.id"
                style="min-height: 150px;"
            >
                <slot :slide="slide">
                    <blockquote class="blockquote m-4 p-0">
                        <img :src="slide.featured_media.url" style="width: 60px" class="rounded-circle border shadow-sm">
                        <div style="color: gold" class="text-center mb-2">★★★★★</div>
                        <div>
                            &ldquo;<span v-html="slide.index_excerpt"></span>&rdquo;
                        </div>
                        <footer class="blockquote-footer text-light">
                            <cite title="Customer Name">
                                <a :href="slide.url" class="text-white">
                                    {{ slide.title }}
                                </a>
                            </cite>
                        </footer>
                    </blockquote>
                </slot>
            </div>
        </transition>
        <div class="mt-3">
            <button class="btn btn-sm btn-outline-light" @click.prevent="previous">&laquo;</button>
            <button class="btn btn-sm btn-outline-light" @click.prevent="next">&raquo;</button>
        </div>
    </div>
</template>
<style lang="sass" scoped>
@import '~animate.css/source/fading_entrances/fadeInLeft.css'
@import '~animate.css/source/fading_exits/fadeOutRight.css'
.animated
    animation-duration: 400ms !important
</style>