先用vue-cli新建一个项目
npm install vue-awesome-swiper --save(-S)
等待安装，安装完后package.json中添加上了vue-awesome-swiper
"dependencies": {
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3"
}
进入main.js
import Vue from 'vue'
import App from './App'
import vueSwiper from 'vue-awesome-swiper' //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css' //引入样式
Vue.config.productionTip = false
Vue.use(vueSwiper) //使用插件
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
swiper的基本结构
<swiper>
<swiper-slide class="swiper-slide"></swiper-slide>
</swiper>
参考swiper的基本结构，在App.vue中尝试一下
<template>
<div id="app">
<div>
<swiper>
<swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
我是第{{item}}个轮播图
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
slide: [1, 2, 3, 4, 5]
}
}
}
</script>
<style>
.swiper-slide {
width: 100%;
height: 500px;
line-height:500px;
font-size: 50px;
text-align: center;
background-color: rosybrown;
}
</style>
成功实现了轮播图的效果，接下来配置一些属性，在
App.vue中进行更改
<template>
<div id="app">
<div>
<swiper :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
我是第{{item}}个轮播图
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <!-- 分页 -->
<div class="swiper-button-prev" slot="button-prev"></div> <!-- 箭头左 -->
<div class="swiper-button-next" slot="button-next"></div> <!-- 箭头右 -->
</swiper>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
slide: [1, 2, 3, 4, 5],
//设置属性
swiperOption: {
//显示分页
pagination: {
el: '.swiper-pagination',
clickable: true //允许分页点击跳转
},
//设置点击箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
//自动轮播
autoplay: {
delay: 400
},
//开启循环模式
loop: true,
//开启鼠标滚轮控制Swiper切换
mousewheel: true
}
}
}
}
</script>
<style>
.swiper-slide {
width: 100%;
height: 500px;
line-height: 500px;
font-size: 50px;
text-align: center;
background-color: rosybrown;
}
</style>
这样就实现了轮播图更多属性的配置
