Vue组件之轮播图flickity

App.vue

<template>
  <div class="bg-gray-100">
    <div style="width: 640px; height: 480px;">
    <carousel>
        <img src="https://placeimg.com/640/480/any?1">
        <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>
</template>

Carousel.vue

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

export default {
    props: {
        cellAlign: {
            default: 'left',
        },
        contain: {
            type: Boolean,
            default: true,
        },
        wrapAround: {
            type: Boolean,
            default: true,
        },

        draggable: {
            type: Boolean,
            default: true,
        },
        pageDots: {
            type: Boolean,
            default: true,
        },
        autoPlay: {
            type: Boolean | Number,
            default: true,
        },
        pauseAutoPlayOnHover: {
            type: Boolean,
            deault: false,
        },
        fullscreen: {
            type: Boolean,
            default: false,
        },
        fade: {
            type: Boolean,
            default: false,
        },
        // More options see: https://flickity.metafizzy.co/options.html
    },
    mounted() {
        new Flickity(this.$el, this.$props);
    }

}
</script>

安装依赖：

yarn add flickity --dev