1、安装依赖
npm install vue-awesome-swiper --save
2、引入awesome-swiper
支持全局引入和在组件中引入2种方式,如果项目中只有一个轮播的话推荐在组件中引入,有多个轮播则推荐在全局中引入。
(1)全局引入方式,在main.js中添加以下代码
import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
vue.use(vueAwesomeSwiper)
3、组件内调用轮播图
支持SPA(single page web application,单页Web应用)和SSR(Server Side Rendering,服务端渲染)2种模式,SPA通过ref属性来查找swiper实例,而SSR借助命令参数查找swiper实例,在使用方面2种模式都是一样的。
(1)SPA模式
HTML结构见下,分页器、向左向右滚动按钮、滚动条等都是可选的,如不需要注释掉即可
<!-- 轮播 -->
<swiper :options="swiperOption"
ref="mySwiper">
<!-- slides -->
<swiper-slide>&l