基于vue的移动端轮播组件-vue-awesome-swiper

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

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

示例

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

    
        
    



// 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: true,
                    delay: 5000, //自动轮播， 默认 3000 ms
                    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);
        }
    }