2018-12-19.md

swiper4.x 如何自定义分页器

• swiper 官方文档
• pagination 是作为初始化轮播时的一个参数, 它也是一个对象

  • el 分页器容器的 css 选择器或 HTML 标, 分页器等组件可以置于 container 之外

  • type 分页器样式类型

    值	类型
    bullets	圆点, 默认值
    fraction	分式, index/total
    progressbar	进度条
    custom	自定义

  • renderBullet(index, className) 自定义分页器的指示点, 接受指示点索引和指示点类名作为参数

• 示例

var mySwiper = new Swiper('.swiper-container ', {
	pagination: {
		el: '.swiper-pagination',
		type: 'custom',
		renderCustom: function(swiper, current, total) {
			var _html = '';
			for (var i = 1; i <= total; i++) {
				if (current == i) {
					_html += '<span class="my-custom my-custom-active"></span>';
				}else{
					_html += '<span class="my-custom"></span>';
				}
			}
			return _html;
		}
	}
});

• 注意事项: 渲染之后, 会自动为 .swiper-pagination 添加一个类 swiper-pagination-custom, 在为 span 设置类名的时候, 不能使用 swiper-pagination-custom