如何在Slick Carousel到达终点时设置旋转木马的平滑过渡？

Question

我正在使用Slick旋转木马。我有这样的jQuery：

$('.my-carousel').slick({
    dots: false,
    variableWidth: true,
    centerPadding: '0px',
    slidesToShow: 4,
    slidesToScroll: 3,
    speed: 2000,
    infinite:true,
    responsive: [
        {
          breakpoint: 1024,
          settings: {
            arrows: true,
            centerPadding: '20px',
            slidesToShow: 3,
            slidesToScroll: 3,
            speed: 1500,
            variableWidth: true,
            infinite:true,
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: true,
            dots: false,
            centerPadding: '20px',
            slidesToShow: 1,
            slidesToScroll: 1,
            speed: 1000,
            variableWidth: false,
            infinite:false,
          }
        }
    ]
});

当到达旋转木马中的最后一个项目时，它会突然回到第一个项目。我试图找到那个设置，但没有运气。如何设置无缝过渡的第一项？

Answer 1

<强>样本

http://plnkr.co/edit/JJ75YAuGLtm7q0E9zSxl?p=preview

删除variableWidth: true,设置，然后根据您的要求设置图片样式。

jQuery(document).ready(function($){
  $('.personnel-slider').slick({
      dots: false,
      //variableWidth: true,
      centerPadding: '0px',
      slidesToShow: 4,
      slidesToScroll: 3,
      speed: 2000,
      infinite:true,
      responsive: [
      {
        breakpoint: 1024,
        settings: {
          arrows: true,
          centerPadding: '20px',
          slidesToShow: 3,
          slidesToScroll: 3,
          speed: 1500,
          //variableWidth: true,
          infinite:true,
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: true,
          dots: false,
          centerPadding: '20px',
          slidesToShow: 1,
          slidesToScroll: 1,
          speed: 1000,
          //variableWidth: false,
          infinite:false,
        }
      }
      ]
  });
});