我们在用swiper做滑动幻灯片效果，当子元素内容比较多时，自定义分页内容会超出主体显示区域，我们想实现的效果是当我们点击到超出的那几个幻灯时，分页内容也会同步滑动，这种该怎么实现呢？
1、CSS部分，定义分页内容父元素pagination显示为flex效果并且位置相对定位，同时子元素swiper-pagination-bullet宽度不被压缩，让子元素显示在同一行，同时父元素和子元素还要被一层元素swiper-container包裹，并设置好宽度、超出内容隐藏
.swiper-container{max-width:420px;overflow: hidden}
.pagination{display: flex;display: -webkit-box;display: -webkit-flex;position:relative;}
.pagination .swiper-pagination-bullet{flex-shrink: 0;}
2、jQuery代码部分，核心利用translate3d实现滑动效果到当前点击部分，参数currentbullet为当前点击子元素，每次滑动里量leftVal=当前子元素距离父节点左边距离+当前元素宽度*2-父节点宽度，如果leftVal小于等于0，表示子元素没有超出，不滑动，否则开始滑动。当前元素宽度*2的意思是leftVal大于等于当前子元素宽度的时候就要开始滑动了，要不然点击最右边的时候不会滑动的。
function transformbullet (currentbullet){
var leftVal =parseInt((currentbullet.position().left-currentbullet.parent().outerWidth()+currentbullet.outerWidth()).toFixed(2)),
navLeftWidth = parseInt(currentbullet.parent().css('padding-left'));
leftVal = leftVal + navLeftWidth;
leftVal = leftVal + currentbullet.outerWidth();
if (leftVal <= 0) {
leftVal = 0
}
currentbullet.parent().css({ 'transform': 'translate3d(' + -leftVal + 'px, 0px, 0px)', 'transition-duration': '1000ms' });
}
