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

Question

I am using Slick carousel. I have jQuery like this:

$('.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,
          }
        }
    ]
});

When reached to the last item in carousel, it jerks back into the first item. I tried to find the setting for that but no luck. How to set the seamless transition first item?

Answer 1

DEMO

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

Remove the variableWidth: true, setting and then style the images as per your requirement.

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