Slick slider how to make a slide scroll when scrolling?

Question

css

Good afternoon, please tell me how can I implement it correctly so that when I scroll to a block with a slider, it scrolls? Now I have disabled the arrows, but it turns out that when scrolling to a block with a slider, it stops, you cannot scroll up and down, but the scroll (arrows) to the left and right turns on. How to make it so that there is no stop and the slider scrolls when scrolling down and up to the block. Thanks in advance.

jQuery(function($) {
      jQuery(document).ready(function () {
        $('.slick-slider')
          .slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplay: false,
            dots: true,
            arrows: false,
            infinite: false,
            responsive: [
              {
                breakpoint: 1400,
                settings: {
                  slidesToShow: 3.5,
                  slidesToScroll: 1,
                },
              },
              {
                breakpoint: 1200,
                settings: {
                  slidesToShow: 3,
                  slidesToScroll: 1,
                },
              },
              {
                breakpoint: 786,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 1,
                },
              },
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  variableWidth: true,
                },
              },
            ],
          })
          .on('wheel', function (e) {
            e.preventDefault();
            if (e.originalEvent.deltaY < 0) {
              $(this).slick('slickNext');
            } else {
              $(this).slick('slickPrev');
            }
          });
      });
    });

Answer 1

Try like this:

.on('wheel', function (e) {
    e.preventDefault();

    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    if(delta > 0) {
        $(this).slick('slickPrev');
    }
    else {
        $(this).slick('slickNext');
    }
    return false;
});