VUE建立照片轮播功能

在项目中需要展示一个景点的多张照片，先以缩略图在上面一排进行显示，下面显示选中的大图，上面一次显示5张，多余5张的可以用两边箭头按钮或触摸屏上的滑动划换，最终实现的效果如下图。

刚开始准备以element的标准组件来实现，可以用el-card实现上面的小图框，里面用image，下面用image显示大图，但上面的滑动效果不好实现，后来还是采用了vue-awesome-swiper组件来实现。

一、安装和导入 vue-awesome-swiper组件

npm install swiper vue-awesome-swiper --save

注意1：这儿是要安装swiper和vue-awesome-swiper两个组件，网上很多方法是安装后一个组件，系统会提示缺省swiper，又要重装。

import ‘swiper/css/swiper.css’

注意2：注意CSS的目录，网上很多方法是老的片本，位置不对在’swiper/dist/css/swiper.css’

二、组件使用

   <swiper :options="swiperOption" v-if="scenicFileList.length!=0">
          <swiper-slide
            v-for="(item,index) in scenicFileList"
            :key=