参考:swiper官方文档自定义分页
这里我碰到的问题:
1.swiper默认是是小圆点,而我这里需要矩形的。通过官方的pagination中的rederCustom()来进行自定义。
2.碰到另一个坑,loop:true时,onclick会失效,这时候可以通过on进行绑定方法。
3.当切换列表重新加载图片时,图片不更新,这里可以在autoplay中设置stopOnLastSlide: false,disableOnInteraction: false,在这里的作用是进行初始化。(每次点击切换就会进行一次初始化)
代码如下:
function swipess(){
var swiper = new Swiper('.vr_img .swiper-container', {
pagination: {
el: '.vr_img .swiper-pagination',
paginationClickable: true,
type: "custom",
autoplayDisableOnInteraction: false,
renderCustom: function (swiper, current, total) { //自定义
var paginationHtml = " ";
for (var i = 0; i < 5; i++) {
// 判断是不是激活焦点,是的话添加active类,不是就只添加基本样式类
i === (current - 1) ? paginationHtml += '<div class="selectioin"></div>' : paginationHtml += '<div class="selectlist"></div>';
}
return paginationHtml;
},
},
clickable: true,
observer: true,
observeParents: true,
direction: 'horizontal',
initialSlide:0,
loop: true,
speed: 1000,
autoplay: {
delay: 2500,
stopOnLastSlide: false,
disableOnInteraction: false,
},
on:{
click:function(){
let swiperList=vrSwiper.data.rows
let index = swiper.realIndex
if(swiperList[index].link){
window.location.href = swiperList[index].link
}else{
let renovationId = swiperList[index].renovationId
let url = '?id='+renovationId+'&module=2'
gotoPage('caseDetails',url)
}
}
}
});
}