vue-awesome-swiper自定义左右箭头

<template>
	<div ref="swiperBox"  class="swiperBox">
	    <swiper  :options="swiperOption" ref="mySwiper">
	                    <swiper-slide class="slideBox" >
	                            <img src="路径" alt="" >
	                    </swiper-slide>
	     </swiper>
	     <!-- 左右箭头 -->
	     <div class="swiper-button-prev" slot="button-prev"></div>
	     <div class="swiper-button-next" slot="button-next"></div>
	 </div>
</template>

<script>
export default {
    name: 'page',
    data(){
        return{
            swiperOption: {
                // loop: true,   // vue-awesome-swiper，loop模式下点击事件无效
                autoplay:false,
                speed: 1000,
                autoplayDisableOnInteraction: false,
                prevButton: ".swiper-button-prev",
                nextButton: ".swiper-button-next",
            }
        }
    },
}
</script>

<style scoped>
	.swiperBox{
	    width:100%;
	    position: relative;
	}
	.swiper_btn{
	    position: absolute;
	}
	.swiper-button-prev{
	    width: 0.36rem;
	    height: 0.28rem;
	    background: url("路径") no-repeat;
	    background-size: 100% 100%; 
	}
	.swiper-button-next{
	    width: 0.36rem;
	    height: 0.28rem;
	    background: url("路径") no-repeat;
	    background-size: 100% 100%; 
	}
</style>