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;
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';