利用swiper插件做点击相应slide块居中

来源:互联网 发布:黑马程序员java面试题 编辑:程序博客网 时间:2024/05/29 18:56
css:.swiper-container .swiper-wrapper{transition: all 1s;}----------js:<script>  var mySwiper = new Swiper ('.swiper-container', {    slidesPerView : 3  });  var windowWidth = $(window).width();//屏幕的宽度  var divWidth = 0;//每个div宽度  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;//当前div距离屏幕左边距离  divWidth = $(this).width();  resPlaceX = (windowWidth - divWidth) / 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>