swiper自定义分页器

之前做官网的时候有个轮播，不同的是，分页是图片和文字，激活的状态，图片和文字会变色。。用过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 = 1i <= totali++) { 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秒 })

js例：

<script>

var swiper = new Swiper('.module01 .swiper-container', {

pagination: '.module01 .swiper-pagination',

paginationClickable: true,

autoplay : 1000

})

var swiper = new Swiper('.module02 .swiper-container', {

slidesPerView:5,

paginationClickable: true,

spaceBetween:0,

freeMode: true

})

</script>

获取他们共用的class的时候加上父元素区分开。

写style的时候.swiper-container和.swiper-paginatio是共用的不要写在里面新建class区分写改变它们不同的样式。

个人用法运用需考虑。

---