npm install vue-awesome-swiper@3 --save-dev
<div class="swiperFa" style="position: relative;margin-top:6vh">
<swiper class="mn-swiper" :options="swiperOption" ref="mySwiper" style="height: 50vh;">
<swiper-slide
class="menuBgc"
v-for="(item, index) in menusList"
:key="index"
>
<!-- <p style="color: #fff">{{ item.font }}</p> -->
<img
class="img"
:src="require(`./../../assets/navs_images/${item.name}.png`)"
alt=""
:data-itemid="item.name"
@click.stop="jumpTo(item.goto, item.key, item.name)"
/>
</swiper-slide>
</swiper>
<div
class="swiper-button-next swiper-button-red"
slot="button-next"
></div>
<div
class="swiper-button-prev swiper-button-red"
slot="button-prev"
></div>
</div>
import { swiper, swiperSlide } from 'vue-awesome-swiper' // 引入轮播插件组件
import 'swiper/dist/css/swiper.css'
components: { swiper, swiperSlide },
data里配置：
// 轮播图选项
swiperOption: {
loop: false,
loopedSlides: 5,
grabCursor: true,
watchOverflow: true,
slidesPerView: 5,
slidesPerGroup: 1,
slideToClickSlide: true,
effect: 'coverflow',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
coverflowEffect: {
rotate: -80, //slide做3d旋转时Y轴的旋转角度。默认50。
stretch: -100, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
depth: 500, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
modifier: 0.2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
slideShadows: false //开启slide阴影。默认 true。
},
}
