Swiper自定义分页器样式

效果：

代码：

html部分：

js部分：

       		var mySwiper = new Swiper('.swiper-container', {
			autoplay: true,//可选选项，自动滑动
            loop: true, // 循环模式选项，true 循环播放
            observer: true,//实时检测，动态更新
			pagination: {
				el: '.swiper-pagination',
				type: 'custom',
				autoplayDisableOnInteraction : false,
				renderCustom: function (swiper, current, total) {
					var paginationHtml = " ";
					for (var i = 0; i < total; i++) {
						// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
						if (i === (current - 1)) {
							paginationHtml += '';
						}else{
							paginationHtml += '';
						}						  
					}
					return paginationHtml;
				},
			}
		});

css部分：

swiper常用参数：

slidesPerView: 4,//设置slider容器能够同时显示的slides数量
spaceBetween: 20,//在slide之间设置距离（单位px）。