使用 vue-awesome-swiper (v3.1.3) 做了一个轮播图片，需要实现的功能，遇到了如下问题：
1、滑动视频和图片都可以切换（如果只是图片没问题，但是视频在暂停状态下却无法滑动？）
2、轮播图正方形，但是视频是长方形，默认视频一直顶部对其，怎么让视频垂直居中对其呢？

swiper组件（基于vue-awesome-swiper (v3.1.3) 封装）：

<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOption" v-if="list.length > 0">
            <swiper-slide v-for="(item, idx) in list" :key="idx">
                <img v-if="item.mediaType == 'img'" class="swiper-img" :src="item.src" alt="">
                <video ref="myvideo" name='myvideo' v-if="item.mediaType == 'video'" :src="item.src" controls="controls" :poster="item.poster"></video>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>

export default {
    name: 'DetailSwiper',
    props:{
        list: Array
    },
    watch: {
        currentIdx (newval, oldval) {
            let videoList = $('.wrapper video').toArray()
            if(videoList.length > 0){
                if(videoList.some(item => !item.paused) && videoList.some(item => !item.ended)){
                    videoList.forEach(element => {
                        element.pause()
                        element.currentTime=0
                    });
                }
            }
        }
    },
    data(){
        let self = this;
        return {
            currentIdx: 0,
            swiperOption: {
                //页码
                pagination: '.swiper-pagination',
                // autoplay: 3000,
                loop: true,
                paginationClickable: true,
                on:{
                    transitionEnd: function() {
                        self.currentIdx = this.realIndex
                        // console.log(self.currentIdx)
                    }
                },  
            },
        }
    },
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 100% 
    background: #eee
    .swiper-img
        width: 100%
</style>