swiper自定义分页器

Posted 2023-03-09

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

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></li>'; else //未激活状态下 _html += '<li class="swiper-pagination-custom"><p>'+text[i-1]+'</p></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秒 )