nuxt项目 使用swiper完成旋转木马轮播效果

nuxt项目 使用swiper完成旋转木马轮播效果_第1张图片

npm install [email protected] --save  

npm install [email protected] --save  

在plugins文件夹里新建vue-swiper.js文件

nuxt项目 使用swiper完成旋转木马轮播效果_第2张图片

vue-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

新建VueSwiper组件 (重点在于on里的内容)

 nuxt项目 使用swiper完成旋转木马轮播效果_第3张图片




组件的使用(如果只是一屏3张图的话可以考虑只修改css样式)





你可能感兴趣的:(笔记,javascript,vue)