Example How to create Carousel component in Vuejs using https://flickity.metafizzy.co/
Install with npm: npm install flickity
Create Carousel.vue component:
<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 how to use this component:
<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>
