Slick Carousel如何调整激活幻灯片位置并解决滑动跳动问题

问题原因 #

你给.slick-current单独加padding-left会改变该幻灯片的实际占位宽度，而Slick在初始化和切换前已经提前计算好了所有幻灯片的偏移距离、滑动总宽度等数值，激活态突然变化的盒模型会和预计算的数值不匹配，因此出现跳动。

解决方案1：用transform替代padding（最便捷） #

transform属于视觉偏移，不会改变元素在文档流中的占位宽度，不会影响Slick的内部计算，直接替换CSS规则即可：

.slick-slide{
  width: 300px;
}
.slick-center .slick-current{
  /* 替换原padding-left为translateX */
  transform: translateX(90px);
}

该方案不需要修改JS初始化配置，也不需要调整HTML结构，生效后不会有跳动问题。

解决方案2：将padding加在幻灯片内部容器（适合需要占用实际空间的场景） #

如果你的偏移需要占用实际布局空间，不能用transform的话，可以把偏移属性加在幻灯片的内部子元素上，避免修改Slick直接管控的.slick-slide元素的盒模型：

.slick-slide{
  width: 300px;
}
.slick-center .slick-current > div:first-child{
  padding-left: 90px;
}

内容的提问来源于stack exchange，提问作者compliance