在使用swiper创建轮播前,需要先知道一件事,原生代码可以直接使用swiper库。
但是在Vue-CLI中使用的是vue-awesome-swiper插件,以下只介绍vue脚手架中使用swiper,所以文章中的swiper特指vue-awesome-swiper。
在vue-cli2中引入swiper
// vue-cli2 中通过npm安装
npm install vue-awesome-swiper --save-dev
vue-cli3中通过vue ui界面安装
vue ui界面 > 依赖 > 安装依赖 > 搜索vue-awesome-swiper > 选择并安装
在框架中引入swiper库
// 在vue根目录下 找到main.js文件,此处以vue-cli3项目为例
// 根目录 > src > main.js
import Vue from 'vue
import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(vueAwesomeSwiper)
在代码中插入swiper轮播
// html片段
<swiper :options="swiperOptions" ref="mySwiper">
<swiper-slide> 轮播内容,可以是文字或图片</swiper-slide>
<swiper-slide> 轮播内容,可以是文字或图片</swiper-slide>
<swiper-slide> 轮播内容,可以是文字或图片</swiper-slide>
// 显示分页器,类名可以自定义, slot固定,可选
<div class="swiper-pagination" slot="pagination"></div>
// 显示切换按钮,类名可以自定义,slot固定,可选
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
// 显示滚动条,类名自定义,slot固定,可选
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
// js部分
data(){
return{
swiperOption: {
loop: true, // 前后衔接循环
navigation: { // 绑定按钮,否则按钮不生效
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
pagination: { // 绑定分页器,否则分页器不显示
el: '.swiper-pagination',
type: 'progressbar' // 将分页器显示为进度条,可选配置项
},
scrollbar: { // 绑定滚动条,否则滚动条不生效
el: '.swiper-scrollbar',
hide: true // 自定隐藏滚动条,可选配置项
}
}
}
}
写在最后
起初是打算直接用swiper库写的,但是发现没用,然后找到了vue-awesome-swiper插件库,但是发现绑定元素的方式和swiper不大一样,就去看GitHub上的项目代码才发现不一样。
此外针对react框架,也有对应的react-awesome-swiper。
官方部分配置应用demo地址
github上项目地址