swiper(pagination)自定义分页swiper中loop:true时，click点击无效

参考：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)
				}
			}
		}
		
		});
}