vue开发中遇到类似原生这种卡片轮播，中间大两边小的需求

网上搜了下，很多都是修改前一个和后一个的高度，然后设置了margin-top，但个人感觉这样病不能保证很好的居中，在研究了官网的demo后，发现https://www.swiper.com.cn/demo/240-effect-coverflow.html这个很好，可以实现需求，而且比网上那种那更好些。

1.安装swiper

cnpm install --save-dev swiper@3.4.2 （此处注意不要使用npm install swiper，安装4.x的版本会在ie和某些手机的浏览器显示白屏） 

2.页面的代码

<template>

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide" v-for="(item,index) in images" :key="index">

<img class="swiper-img" :src="item" />

</div>

</div>

</div>

</template>

 

<script>

import Swiper from "swiper"

import 'swiper/dist/css/swiper.min.css'

export default {

data() {

return {

images: [

require('../../../static/image/sunshine/banner1.png'),

require('../../../static/image/sunshine/banner2.png'),

require('../../../static/image/sunshine/banner3.png'),

require('../../../static/image/sunshine/banner4.png'),

require('../../../static/image/sunshine/banner5.png'),

require('../../../static/image/sunshine/banner6.png'),

require('../../../static/image/sunshine/banner7.png')

],

}

},

methods: {

},

mounted() {

var swiper = new Swiper('.swiper-container', {

effect: 'coverflow',

loop: true,

grabCursor: true,

centeredSlides: true,

slidesPerView: 'auto',

autoplay: 3000,

autoplayDisableOnInteraction:false,

coverflow: {

rotate: 10,

stretch: 0,

depth: 100,

modifier: 1,

slideShadows: false,

},

spaceBetween: 30,

});

},

}

</script>

 

<style lang="scss">

.swiper-container {

background-color: rgb(58, 138, 251);

z-index: 0;

width: 100%;

padding-top: 10px;

padding-bottom: 15px;

.swiper-slide {

background-position: center;

background-size: cover;

width: 80%;

.swiper-img {

border-radius: 10px;

width: 100%;

}

}

}

</style>