1、下载安装 官方文档:vue-awesome-swiper - npm
npm i [email protected]
2、在plugins文件夹新建swiper.js 文件名可自定义
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
3、在nuxt.comfig.js中配置引入
css: [
'swiper/css/swiper.min.css',
],
plugins: [
{src:'@/plugins/swiper',ssr: false},
],
4、页面组件中引入使用
<template>
<div>
<div id="swiperWrapper">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-container" @mouseenter="on_enter" @mouseleave="on_leave">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in list1" :key="index">
<img style="width: 100%;height: 100%;" src="https://pigmcsdotcom.pigcms.com/kuaijing/zhsq/images/banner1.png">
</div>
</div>
<div class="swiper-pagination" style="display: flex;align-items: center;justify-content: center;position: absolute;bottom:10rem;left: 0;width: 100%;"></div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
list1:[1,2],
swiperOption:{
loop: true,
autoplay: {
disableOnInteraction: false,
delay: 2000 //3秒切换一次
},
slidesPerView: 'auto', //slide容器能够同时显示的slides数量
pagination: {
el: '.swiper-pagination',
type: 'custom', // 自定义轮播图bullet指示点
renderCustom: function (swiper, current, total) {
const activeColor = '#fff'
const normalColor = '#618cf5'
let color = ''
let paginationStyle = ''
let html = ''
let width = '9rem'
for (let i = 1; i <= total; i++) {
if (i === current) {
color = activeColor
width = '30rem'
} else {
color = normalColor
width = '9rem'
}
if (i === total) {
paginationStyle = `background:${color};width: ${width}; height: 9rem;border-radius:9rem;opacity:1`
} else {
paginationStyle = `background:${color};margin-right: 8rem; width: ${width}; height: 9rem;border-radius:9rem;opacity:1`
}
html += `<span class="swiper-pagination-bullet" style="${paginationStyle}"></span>`
}
return html
}
}
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
methods:{
on_enter () { //鼠标移入停止轮播
this.swiper.autoplay.stop()
},
on_leave () {//鼠标移出继续轮播
this.swiper.autoplay.start()
},
}
}
</script>