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>
利用swiper插件做点击相应slide块居中
最新推荐文章于 2024-05-14 16:15:15 发布