轮播图

Vue

缩略图控制循环（级联）

1.npm安装vue-awesome-swiper

npm install vue-awesome-swiper --save

2.全局挂载，在main.js中添加

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.组件内复制修改代码
缩略图控制循环
4.修改样式和配置

direction: 'vertical',

封装全屏轮播图

轮播图和其他区域联动

思想：当悬浮文章标题时，显示对应的轮播图。使用鼠标悬浮事件，让轮播图滑动到对应的图片。

参考

swiper demo
swiper github

网站导航

网站导航