swiper自定义分页器

之前做官网的时候有个轮播，不同的是，分页是图片和文字，激活的状态，图片和文字会变色。。用过superslide插件，但感觉卡，而且图片分页是自定义的，感觉不是很好，就研究了下swiper的自定义分页功能。

Paste_Image.png

做完应该是这个样子

先上代码

var mySwiper1 = new Swiper('.my-swiper', { autoplay: 5000,//可选选项，自动滑动 speed: 1000, grabCursor : true, prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', loop : true, pagination : '.my-page',//分页器所在容器 paginationClickable :true,//分页器可控制swiper切换 paginationType: 'custom',//自定义 //自定义分页方法 paginationCustomRender: function (swiper, current, total) { var text = ['登录注册','筛选译员','预约译员','确认付款']; var oImg = [11,22,33,44]; var nImg = [1,2,3,4]; // console.log(text); var _html = ''; for (var i = 1; i <= total; i++) { if (current == i) { //激活状态下 _html += '<li class="swiper-pagination-custom active"><p>'+text[i-1]+'</p>![](images/'+nImg[i-1]+'.png)</li>'; }else{ //未激活状态下 _html += '<li class="swiper-pagination-custom"><p>'+text[i-1]+'</p>![](images/'+oImg[i-1]+'.png)</li>'; } } return _html;//返回所有的页码html } })
//给每个页码绑定跳转的事件 $('.my-page').on('click','li',function(){ var index = $(this).index(); console.log(index); //切换到指定slide mySwiper1.slideTo(index+1, 1000, false);//切换到第一个slide，速度为1秒 })

这样就完成了，简单粗暴

感觉swiper还是很好用的，还是需要多看API
用插件自带的方法就是比自己写的稳定些