How to make the Slick slider without looping not scroll the slides to the left until the last one?

Question

JavaScript

https://jsfiddle.net/65n62w3b/3/ Responsive slider without looping

- the number of slides shown is not known in advance - can be from 2 to 7

beyond the right border of the container

There is too much empty space on the right

Answer 1

You can calculate in advance how many slides you can fit at different screen resolutions, and use the responsive property to set the necessary breakpoints, like this:

$('.slider').slick({
  variableWidth: true,
  dots: false,
  infinite: false,
  slidesToShow: 5,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 4
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2
      }
    }
  ]
});

https://jsfiddle.net/65n62w3b/6/