Carousel.vue example from Laracasts.

## 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>
	<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>
	<!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>