如何在 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,
        }
      }
      ]
  });
});

如何在 Slick Carousel 结束时设置轮播的平滑过渡？

How to set smooth transition of the carousel when reached to end in Slick Carousel?

jquery

carousel

smooth-scrolling

slick.js