Carousel.vue

## Carousel.vue
<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
import Flickity from 'flickity';
import 'flickity/dist/flickity.min.css';

export default {
    props: {
        wrapAround: { default: true },
        autoPlay: { default: false }
    },

    mounted() {
        new Flickity(this.$el, {
            wrapAround: this.wrapAround,
            autoPlay: this.autoPlay,
            cellAlign: 'left',
            contain: true
        });
    }
};
</script>

## example.html
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Example</title>
    </head>
    <body>

        <div id="app">
            <carousel>
                <img src="https://placeimg.com/640/480/any">
                <img src="https://placeimg.com/640/480/any?2">
                <img src="https://placeimg.com/640/480/any?3">
                <img src="https://placeimg.com/640/480/any?4">
                <img src="https://placeimg.com/640/480/any?5">
            </carousel>
        </div>

        <script src="/js/app.js"></script>
    </body>
</html>