vueawesomeswiper自定义 导航点

1，pagination的配置

pagination: {

　　el: '.swiper-paginationfull',

　　// type:'bullets',

　　// bulletElement : 'span',//设置分页器小圆点标签，默认为span标签

　　// clickable:true,

　　// paginationClickable: true,

　　// notNextTick:true,

　　// bulletClass: 'bullet-class',

　　// bulletActiveClass: 'bullet-active-class',

　　type:'custom',//自定义导航的前提设置

　　renderCustom: function (swiper, current, total) {//current从1开始 total=5       有5个轮播页

　　　　var customPaginationHtml = "";

　　　　for(var i = 0; i < total; i++) {//加导航点

　　　　　　if(i == (current - 1)) {

　　　　　　　　customPaginationHtml += '<span class="bullet-class bullet-active-class"></span>';

　　　　　　} else {

　　　　　　　　customPaginationHtml += '<span class="bullet-class"></span>';

　　　　　　}

　　　　}

　　　　for(var i = 0; i < total-1; i++){//加分割线（可不加 完全自定义）

　　　　　　customPaginationHtml += '<div class="line"></div>'

　　　　}

　　　　return customPaginationHtml;

　　}

},

2，//导航盒子 采用固定定位

.swiper-paginationfull{

position:fixed;

top:50%;

transform:translateY(-50%);

left:98%;

z-index:1;

width:0.3rem;

height:1.52rem;

}

3，//给导航点加点击事件   在mounted里            这里采用事件代理的方式

$('.swiper-paginationfull').on('click','span',function(){

　　var index = $(this).index();

　　self.$refs.mySwiper.swiper.slideTo(index, 500, false);//切换到第一个slide，速度为0.5秒

});

 

中间的导航点样式可以自定义，想怎么写就怎么写，不过这些关于导航的样式需要import引入 在swiper实例化之前  我也不知道为啥

　　script中写

import '@/css/bullet.css';