Javascript 如何使平滑滑块在循环中平滑过渡

Javascript 如何使平滑滑块在循环中平滑过渡,javascript,jquery,css,sass,slick.js,Javascript,Jquery,Css,Sass,Slick.js,因此,我使用与Andrei几乎相同的代码构建了一个滑块 那太好了。。。但是你注意到了吗?当你滚动回到第一张幻灯片时,它会跳起来 有人知道我怎么解决这个问题吗?我一直在尝试不同的事情,但似乎没有任何效果 我希望它能够在加载下一幅图像时,在滑块循环周围平滑过渡,而不会出现跳跃 任何帮助都将不胜感激。谢谢 $('.slider')。光滑({ centerMode:对, 中心填充:“30px”, 幻灯片放映:3 }); .slick slide>div{ 变换:缩放(.5); 变换:变换.3s三次贝塞

因此,我使用与Andrei几乎相同的代码构建了一个滑块

那太好了。。。但是你注意到了吗?当你滚动回到第一张幻灯片时,它会跳起来

有人知道我怎么解决这个问题吗?我一直在尝试不同的事情,但似乎没有任何效果

我希望它能够在加载下一幅图像时,在滑块循环周围平滑过渡,而不会出现跳跃

任何帮助都将不胜感激。谢谢

$('.slider')。光滑({
centerMode:对,
中心填充:“30px”,
幻灯片放映:3
});
.slick slide>div{
变换:缩放(.5);
变换:变换.3s三次贝塞尔(.4,0,2,1);
}
.光滑中心>分区{
变换:比例(1);
}
.滑块\uuu项目>img{
宽度:100%;
高度:自动;
}

请添加滑动条选项:

speed:1300,
infinite: true,
$('.slider')。光滑({
centerMode:对,
中心填充:“30px”,
幻灯片放映:3,
速度:1300,
无限:是的,
});
.slick slide>div{
变换:缩放(.5);
变换:变换.3s三次贝塞尔(.4,0,2,1);
}
.光滑中心>分区{
变换:比例(1);
}
.滑块\uuu项目>img{
宽度:100%;
高度:自动;
}

所以我只是改变了我的css,这样我就可以直接瞄准。圆滑的中心穿过。圆滑的幻灯片,这似乎就达到了目的

我不知道为什么之前这个不起作用,因为我以几乎相同的方式设置它,但出于某种原因。滑溜中心必须被定位通过。滑溜而不是独立,以便它被提起并顺利工作

感谢链接到


:)

非常感谢,但是您是否看到在第6次单击“下一步”按钮时,它似乎仍然比其他幻灯片跳得更大,而不是平稳地变大?我似乎不知道是什么原因导致了这一切:(在这里你可以找到一张关于这个bug的有趣的罚单:也许它对你也有帮助。太棒了,这解决了我的问题!不知道为什么我从来没有想过检查罚单哈哈。非常感谢:)耶!不客气!:-)