Slick Carousel - 如何更改活动幻灯片位置答案

【问题标题】：Slick Carousel - how to change active slide positionSlick Carousel - 如何更改活动幻灯片位置
【发布时间】：2021-12-17 16:45:00
【问题描述】：

您好，我需要使用padding-left 将当前活动幻灯片向右移动一点。这样做会使滑块在下一张幻灯片上跳一点。

如何解决此问题？

https://jsfiddle.net/ezy50jd2/2/

HTML：

<div class="slick-center">
  <div>
    <img src="https://via.placeholder.com/260x150">
  </div>
  <div>
    <img src="https://via.placeholder.com/260x150">
  </div>
  <div>
    <img src="https://via.placeholder.com/260x150">
  </div>
</div>

CSS：

.slick-slide{
  width: 300px;
}
.slick-center .slick-current{
  padding-left: 90px;/*this makes slides jump*/
}

设置：

$(function () {
    $('.slick-center').slick({
        infinite: true,
        autoplay: true,
        centerMode: true,
        centerPadding: '180px',
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 400,
        dots: false,
        prevArrow: false,
        nextArrow: false,
        variableWidth: true
    });
});

【问题讨论】：

在“当前项目”上设置填充的目的是什么？
好问题，因为我需要在每个当前活动幻灯片的左侧添加一个元素。所以当前幻灯片需要向右推。
只是问一下，因为可能有更好的方法来解决您的问题，如果您愿意提供更多关于这个 element 是什么的标记。

标签： javascript html jquery css slick.js

【解决方案1】：

您可以尝试使用 transform 属性。您甚至可以添加过渡效果以获得更流畅的动画。

 transform: translateX(90px);  
 transition: 1s ease-in-out;

实现的一个分支 https://jsfiddle.net/nh4qucdp/25/

【讨论】：

嗨，Aditya，非常感谢，但在 3 张幻灯片之后仍然有跳跃效果，即使在我的现场版本中确实出现了过渡。这可能是光滑滑块的错误吗？