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>