版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JamieCheung/article/details/81215749
一、使用方法:
1、先在Terminal控制台执行安装vue-awesome-swiper并保存
npm install vue-awesome-swiper --save
2、在main.js中导入插件,并导入样式,并引用
import VueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
// 引用
Vue.use(VueSwiper)
方法一、
1、在需要使用的页面文件模板中:我这里是Home.vue
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>
<img class="swiper" src="../../static/img/swiper1.png"/>
</swiper-slide>
<swiper-slide>
<img class="swiper" src="../../static/img/swiper2.png"/>
</swiper-slide>
<swiper-slide>
<img class="swiper" src="../../static/img/swiper3.png"/>
</swiper-slide>
</swiper>
</div>
</template>
2、在script中:
data () {
return {
swiperOption: {
autoplay: true, // 自动切换
loop: true // 循环
}
}
},
方法二:
1、在需要使用的页面文件模板中:我这里是Home.vue
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide v-for="item in items" v-bind:key="item.id">
<img class="swiper" v-bind:src="item.src"/>
</swiper-slide>
<div class="swiper-pagination " slot="pagination"></div>
</swiper>
</div>
</template>
2、在script中:
data () {
return {
swiperOption: {
autoplay: true, // 自动切换
loop: true, // 循环
pagination: {
el: '.swiper-pagination',
type: 'bullets' // 默认圆点指示点
}
},
items: [
{id: 1, src: '../../static/img/swiper1.png'},
{id: 2, src: '../../static/img/swiper2.png'},
{id: 3, src: '../../static/img/swiper3.png'}
]
}
},
效果如下:
二、自定义bullet指示点
将type改为'custom'
swiperOption: {
autoplay: true, // 自动切换
loop: true, // 循环
pagination: {
el: '.swiper-pagination',
type: 'custom', // 自定义轮播图bullet指示点
renderCustom: function (swiper, current, total) {
const activeColor = '#158300'
const normalColor = '#aeaeae'
let color = ''
let paginationStyle = ''
let html = ''
for (let i = 1; i <= total; i++) {
if (i === current) {
color = activeColor
} else {
color = normalColor
}
// 如果是最后一个bullet指示点,不存在右边距
if (i === total) {
paginationStyle = `background:${color}; opacity: 1; width: 6px; height: 6px;`
} else {
paginationStyle = `background:${color}; opacity: 1; margin-right: 5px; width: 6px; height: 6px;`
}
html += `<span class="swiper-pagination-bullet" style="${paginationStyle}"></span>`
}
return html
}
}
},
效果图如下: