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

Posted 2023-05-07

【中文标题】Slick Carousel - 如何更改活动幻灯片位置

【英文标题】：Slick Carousel - how to change active slide position

【发布时间】：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 是什么的标记。

【参考方案1】：

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

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

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

【讨论】：

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