vue2.0引用vue-awesome-swiper插件实现左右滑动轮播效果

首先需要下载依赖npm install vue-awesome-swiper --save

同时引入css样式

<link rel="stylesheet"  href="/static/css/swiper.min.css" charset="utf-8">

<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<!-- 这部分放你要渲染的那些内容 -->
<swiper-slide><div class="fd_slide fd_slide1">I'm Slide 1</div></swiper-slide>
<swiper-slide><div class="fd_slide fd_slide2">I'm Slide 2</div></swiper-slide>
<swiper-slide><div class="fd_slide fd_slide3">I'm Slide 3</div></swiper-slide>
<swiper-slide><div class="fd_slide fd_slide4">I'm Slide 4</div></swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
components: {
swiper,
swiperSlide
},
data(){
return {
swiperOption: {
initialSlide:0,//设定初始化时slide的索引
direction:'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
loop: false,  //无限滚动
speed:300,//滑动速度
autoplay:100,//自动切换的时间间隔
onSlideChangeEnd: swiper => { //滑动之后回调函数
//切换结束时，告诉我现在是第几个slide
console.log('onSlideChangeEnd', swiper.realIndex)
}
},
}
},
}
</script>
<style lang='less'>
.fd_slide{
height: 888px;
width: 100%;
background: red;
}
.fd_slide1{
background: yellow;
}
.fd_slide2{
background: red;
}
.fd_slide3{
background: yellowgreen;
}
.fd_slide4{
background: orange;
}
</style>