How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?

Question

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 user to go to any side of the page like up and down side. I want to allow user after completing slider to continue his page journey to other section like upper sections of the sliders or bottom sections of the slider. Any one any suggestion or correction for problem and allow user to continue to page scroll after completing the slides. I try some solution but in all solutions there are same problems or I miss understand something. If you have any example or suggestion then please comment down. I am grateful for you.

and here is the js fiddle link to try out some js fiddle

   
    Scroll down
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
    123
  

  
    
      
   
   
     
   
   
    
   
 
 
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   123
   Scroll up
 


         .main-slider {
      width:100%;
      box-sizing: borde-box;
    }

    .main-slider img {
      width:100%;
    }

    /* Slider */
    .slick-slider
    {
        position: relative;

        display: block;
        box-sizing: border-box;

        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;

        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
            touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }

    .slick-list
    {
        position: relative;

        display: block;
        overflow: hidden;

        margin: 0;
        padding: 0;
    }
    .slick-list:focus
    {
        outline: none;
    }
    .slick-list.dragging
    {
        cursor: pointer;
        cursor: hand;
    }

    .slick-slider .slick-track,
    .slick-slider .slick-list
    {
        -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
             -o-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    .slick-track
    {
        position: relative;
        top: 0;
        left: 0;

        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .slick-track:before,
    .slick-track:after
    {
        display: table;

        content: '';
    }
    .slick-track:after
    {
        clear: both;
    }
    .slick-loading .slick-track
    {
        visibility: hidden;
    }

    .slick-slide
    {
        display: none;
        float: left;

        height: 100%;
        min-height: 1px;
    }
    [dir='rtl'] .slick-slide
    {
        float: right;
    }
    .slick-slide img
    {
        display: block;
    }
    .slick-slide.slick-loading img
    {
        display: none;
    }
    .slick-slide.dragging img
    {
        pointer-events: none;
    }
    .slick-initialized .slick-slide
    {
        display: block;
    }
    .slick-loading .slick-slide
    {
        visibility: hidden;
    }
    .slick-vertical .slick-slide
    {
        display: block;

        height: auto;

        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }




           const slider = $(".main-slider");
    slider
      .slick({
        slidesToShow: 1,
      slidesToScroll: 1,
        dots: false,
        arrows:false
      });

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

      if (e.originalEvent.deltaY < 0) {
        $(this).slick('slickPrev');
      } else {
        $(this).slick('slickNext');
      }
    }));

user_6193316 · Answer

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);

});

How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?

1 Answers