uni-app swiper轮播图(全屏/卡牌)

效果图：

 

1.自定义组件 bw-swiper.vue 代码：

<template>
    <view class="swiperContent">
        <swiper
            @change="change"
            @animationfinish="animationfinish"
            :indicator-dots="indicatorDots"
            :indicator-active-color="indicatorActiveColor"
            :indicator-color="indicatorColor"
            :current="current"
            :interval="interval"
            :duration="duration"
            :circular="circular"
            :vertical="vertical"
            :previous-margin="previousMargin"
            :next-margin="nextMargin"
            :display-multiple-items="displayMultipleItems"
            :skip-hidden-item-layout="skipHiddenItemLayout"
            :autoplay="(autoplay && flag)"
            :style="{'height':swiperHeight+'px'}"
            :class="(swiperType && displayMultipleItems ==1 && !vertical && !fullScreen)?'cardSwiper':'' "
            class="screen-swiper"
        >
            <swiper-item class="swiper-item"  v-for="(item,index) in swiperList" :key="index" :class="(cardCur==index && displayMultipleItems ==1 && !vertical &&  !fullScreen)?'cur':''"  @tap="clickItem(index)">
                <view v-if="item[imageKey] && !item[videoKey]">
                    <image :src="item[imageKey]"  :style="{'height':swiperHeight+'px'}"></image>
                    <text v-if="textTip" class="swiperText" :style="{
                        'bottom':(swiperType?(textStyleBottom+12):textStyleBottom)+'%',
                        'right':textStyleRight+'%',
                        'color':textStyl