Is there any way to have both slidesToScroll and swipeToScroll behavior in a slick carousel?

Question

I have a carousel with variable widths, I would like for it to have a behavior of scrolling all displayed blocks and also for the user to swipe to any spot, but no matter how I try, they seem to contradict each other. Here's my configuration:

$('.carousel').slick({
 infinite: false,
 variableWidth: true,
 slidesToShow: 1,
 slidesToScroll: 7,
 swipe: true,
 swipeToSlide: true,
});

Is there any workaround for this problem?

I have a codepen with the example below: https://codepen.io/vicpantoja/pen/NWxqKzO

Answer 1

The issue is using the swipeToSlide option. Setting swipeToSlide: true overrides slidesToScroll. From the website, "Allow users to drag or swipe directly to a slide irrespective of slidesToScroll" (http://kenwheeler.github.io/slick/).

If you want 7 slides to show at one time and a swipe (or 'next' button click) to show the next set of 7, you can do it by setting these three options and removing swipeToSlide:

slidesToShow: 7
slidesToScroll: 7
swipe: true

In your case:

  $('.carousel').slick({
    infinite: false,
    variableWidth: true,
    slidesToShow: 7,
    slidesToScroll: 7,
    swipe: true
  });