vue中使用vue-awesome-swiper实现图片轮播效果(超详细解析)

首先我们先了解一下vue-awesome-swiper

什么是vue-awesome-swiper?

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果.

安装:

npm install vue-awesome-swiper --save

先看一下我的项目结构吧:

vue中使用vue-awesome-swiper实现图片轮播效果(超详细解析)_第1张图片

项目创建命令:

vue init webpack whiteware

whiteware是项目名称

安装node.js在这里就不说了,再扯都扯零基础上了

我们这篇博客是为了用vue-awesome-swiper实现轮播效果,这是大佬封装好的一个轮播插件

安装好之后我们需要在项目中src > main.js中引入一下,我这里是全局引入,当然也可以局部引入,看个人需求

import App from './App'
import router from './router'
import axios from 'axios'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'


Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper, /* { default global options } */)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

一定不要忘了Vue.use(VueAwesomeSwiper, /* { default global options } */)

这样我们就可以去组件里用了

当然也可以把轮播单独写一个组件来用,在这里就不那么麻烦了

html:


js:


                    
                    

你可能感兴趣的:(vue.js)