Как установить плавный переход карусели, когда ее достигнут до конца в карусели?

Question

Я использую карандаш для карандашей. У меня есть 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

DEMO

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