利用swiper插件做点击相应slide块居中的代码实例

css：
.swiper-container .swiper-wrapper{
transition: all 1s;
}


----------


js：
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    slidesPerView : 3
  });
  var windowWidth = $(window).width();//屏幕的宽度
  var pWidth = 0;//每个p宽度
  var resPlaceX = 0;//最终的位置X
  var moveDistance = 0;//移动的距离
  var startTranform = 0;//当前的transform值
  var startTranformStr = ''//transform字符串
  $('.swiper-slide').on('click',function(e){
  var ev = e || event;
  var disX = ev.clientX  - ev.offsetX;//当前p距离屏幕左边距离
  pWidth = $(this).width();
  resPlaceX = (windowWidth - pWidth) / 2;
  moveDistance = disX - resPlaceX; 
  startTranformStr = $('.swiper-wrapper').get(0).style.transform;
  startTranform = startTranformStr.slice(startTranformStr.indexOf('(') + 1,
  startTranformStr.indexOf('px'));
  if (startTranform == '') {startTranform = 0};
  $('.swiper-slide').removeClass('font-red');
  $(this).addClass('font-red');
  $('.swiper-wrapper').css({
  'transform' : 'translate3d('+ (parseInt(startTranform) + -moveDistance) +'px,0,0)',
  'transition-duration' : '1s'
  });
  });       
</script>