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