<template>
    <swiper :options="swiperOption">
        <slot>
            <!-- 滚动内容 -->
            <!-- 下面的按需求引入 -->
        </slot>
        <!-- <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
</template>

<script>
import { swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
    name: 'Swiper',
    props: {
        options: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            swiperOption: {
                // 滚动方向
                // direction: 'vertical',
                // 展示swiper-slide的个数
                slidesPerView: 1,
                // 展示swiper-slide是否居中
                centeredSlides: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false // 手动切换之后继续自动轮播
                },
                loop: true
                // 显示分页
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true // 允许分页点击跳转
                // },
                // 设置点击箭头
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev'
                // }
            }
        }
    },
    components: {
        swiper
    },
    created () {
        this.initPage()
    },
    methods: {
        initPage () {
            // 合并参数
            Object.assign(this.swiperOption, this.options)
        }
    }
}
</script>

<style lang="less" scoped>
.swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
    .swiper-slide {
        width: 100%;
        height: 100%;
    }
}
</style>