How To Continue Scrolling The Page After The Last Slide Of The Slick Slider In The Both Direction Up And Down?

I have a slick-slider that are slide on mouse scroll when user reaches to slider section, but after scrolling all the slides the slider stuck at that position and don't allow the u

Solution 1:

I think the solution would be to check during the wheel event whether the end of the slider has been reached. One way would be to compare the index of the .slick-current element with the amount of slick elements.

Just a hint: You may also want to check if the slider is already fully visible, otherwise the slider may scroll too early.

I've added the support for multiple sliders on the page and handled the problem of the comment.

$(document).ready(function() {

  const slider = $('.slider');
  
  function onSliderAfterChange(event, slick, currentSlide) {
    $(event.target).data('current-slide', currentSlide);
  }
  
  function onSliderWheel(e) {
    var deltaY = e.originalEvent.deltaY,
      $currentSlider = $(e.currentTarget),
      currentSlickIndex = $currentSlider.data('current-slide') || 0;
    
    if (
      // check when you scroll up
      (deltaY < 0 && currentSlickIndex == 0) ||
      // check when you scroll down
      (deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
    ) {
      return;
    }

    e.preventDefault();

    if (e.originalEvent.deltaY < 0) {
      $currentSlider.slick('slickPrev');
    } else {
      $currentSlider.slick('slickNext');
    }
  }
  
  slider.each(function(index, element) {
    var $element = $(element);
    // set the length of children in each loop
    // but the better way for performance is to set this data attribute on the div.slider in the markup
    $element.data('slider-length', $element.children().length);
  })
  .slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false
  })
  .on('afterChange', onSliderAfterChange)
  .on('wheel', onSliderWheel);

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="width: 100%">
  <div style="height: 500px; background-color: #aaa"></div>
  <div class="slider">
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
  </div>
  <div style="height: 500px; background-color: #ccc"></div>
  <div class="slider">
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
  </div>
</div>