如何在 slick slider 的最后一張幻燈片之后繼續向上和向下滾動頁面？

Question

當用戶到達 slider 部分時，我有一個在鼠標滾動上滑動的光滑滑塊，但是在滾動所有幻燈片后，slider 停留在那個 position 並且不允許用戶將 go 向上和向下移動到頁面的任何一側邊。 我想讓用戶在完成 slider 后繼續他的頁面之旅到其他部分，如滑塊的上部或 slider 的底部。任何人對問題的任何建議或更正，並允許用戶在完成幻燈片后繼續頁面滾動。 我嘗試了一些解決方案，但在所有解決方案中都存在相同的問題，或者我想念一些東西。 如果您有任何示例或建議，請發表評論。 我很感激你。

這是 js fiddle 鏈接來嘗試一些js fiddle

   <div>
    <p>Scroll down</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
  </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>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>Scroll up</p>
 </div>


         .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');
      }
    }));

Answer 1

我認為解決方案是在wheel事件期間檢查是否已達到 slider 的末尾。 一種方法是將.slick-current元素的索引與 slick 元素的數量進行比較。

提示：您可能還想檢查 slider 是否已經完全可見，否則 slider 可能滾動得太早。

我在頁面上添加了對多個滑塊的支持並處理了評論的問題。

 $(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>