基于vue的移动端轮播组件vueawesomeswiper

需求
swiper 默认显示 3 个，且中间放大，如图：

组件
vue-awesome-swiper –? 基于 swiper.js
具体的配置和 demo 可以去官网查看~

示例

⚠️ 当前 slide 居中通过 options 配置，放大通过 css 控制！

<swiper ref="mcSwiper" class="echw-fb-swiper" :options="swiperOption" >
    <swiper-slide class="echw-fb-swiper-slide" v-for="(item, idx) in userContentImg"  :key="idx">
        <img :src="item">
    </swiper-slide>
</swiper>


// npm install vue-awesome-swiper
import 'swiper/dist/css/swiper.css';
import {swiper, swiperSlide} from 'vue-awesome-swiper';

export default {
        components: {
            swiper,
            swiperSlide,
        },
        data () {
            return {
                // 图片轮播配置
                swiperOption: {
                    centeredSlides: true,  // 当前 slide 居中显示
                    slidesPerView: 'auto',  // 1 是显示 1 个 banner, 'auto' 自适应
                    spaceBetween: 12, // slide 间隔（px）loop: true,
                    autoplay: 3000,
                    simulateTouch: true, // 鼠标拖拽
                    allowTouchMove: true  // 触摸滑动
                },
                userContentImg: ["1.png","2.png"], // n 个
            }
        },
    }

  // scss
    $base-font-size: 37.5px;

    @function px2rem($px) {@return ($px / $base-font-size) * 1rem / 2;
    }

    // swiper
    .echw-fb-swiper {
        width: 100%;  // 外层 dev 有宽度
        height: px2rem(300px);
    }
    
    // swiper-slide -- 无论是不是当前 slide，宽高保持不变
    .echw-fb-swiper-slide {width: px2rem(660px);
        height: px2rem(300px);
        // 图片居左
        img{
            display: block;
            width: px2rem(500px);
            height: px2rem(260px);
            margin: px2rem(20px) 0;
            border-radius: px2rem(12px);
        }
    }
    // 当前 slide -- 图片放大
    .swiper-slide-active {
        img {width: px2rem(660px);
            height: px2rem(300px);
            margin: 0;
        }
    }
    // 前 slide -- 图片居右
    .swiper-slide-prev {
        img {margin-left: px2rem(160px);
        }
    }