一、安装
npm install swiper vue-awesome-swiper --save
可以在vue-awesome-swiper后面添加版本,这样就不会默认安装最新版本,如
npm install swiper vue-awesome-swiper@3.6.7 --save
在下面的例子中,笔者使用的v3.6.7
二、全局挂载(肯定是写在main.js里面)
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
三、实例
<template>
<div class="wrapper">
<swiper :options="swiperOption" class="swiper-container" >
<!-- slides -->
<swiper-slide class="swiper-item" v-for='item of swiperList' :key='item.id'>
<img class='swiper-img' :src='item.imgUrl' alt="去哪儿门票" />
</swiper-slide>
<!-- Optional controls ,显示小点-->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "HomeHeader",
data(){
return{
swiperOption:{
// 参数选项,显示小点
pagination:'.swiper-pagination',
//循环
loop:true,
//每张播放时长3秒,自动播放
autoplay:2000,
//滑动速度
speed:2000,
// delay:1000
effect: 'coverflow',
fadeEffect: {
crossFade: false,
},
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
coverflowEffect: {
rotate: 0,
stretch: 120,
depth: 100,
modifier: 1,
slideShadows : true,
}, //这样应该就是你想要的效果
zoom:'zoom',
nextButton:'.swiper-button-next',
prevButton:'.swiper-button-prev',
scrollbar:'.swiper-scrollbar'
},
//三张轮播,使用变量循环
swiperList:[
{
id:'001',
imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg"
},
{
id:'002',
imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
},
{
id:'003',
imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg"
}
]
}
},
}
</script>
<style scoped lang="stylus">
// >>>穿透作用,因为swiper-pagination-bullet-active类在组件内部定义的,想要wrapper也能作用到,可以用>>>
.wrapper >>>.swiper-pagination-bullet-active
background #fff !important
.wrapper
overflow:hidden
width 100%
height:0
padding-bottom:26.6666667%
background :#ccc
.swiper-item
width:100%
.swiper-img
width:100%
</style>
网友评论