user75472 user75472 - 1 month ago 22
jQuery Question

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

Hi 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, can anyone help in this?

Thanks in advance

Answer

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