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

admin管理员组

文章数量:1316675

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 pleting 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 pleting 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 ment down. I am grateful for you.

and here is the js fiddle link to try out some 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=".jpg" />
   </div>
   <div class="slider-in">
     <img src=".jpg" />
   </div>
   <div class="slider-in">
    <img src=".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');
      }
    }));

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 pleting 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 pleting 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 ment down. I am grateful for you.

and here is the js fiddle link to try out some 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./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
   </div>
   <div class="slider-in">
     <img src="https://cdn.pixabay./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
   </div>
   <div class="slider-in">
    <img src="https://cdn.pixabay./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');
      }
    }));

• javascript
• html
• jquery
• css
• slick.js

Share Improve this question Follow asked Jul 17, 2020 at 4:21 TaskmasterTaskmaster 7811 gold badge11 silver badge88 bronze badges 2

• It would work fine without the slider.on('wheel', ... function. The user can still swipe sideways to see all the pictures. – Ismael Padilla Commented Jul 17, 2020 at 4:30
• Thank you for suggestion but I want to allow user slide only on scroll not on by swiping left and right by mouse. Can you have any idea about that? – Taskmaster Commented Jul 17, 2020 at 5:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 pare 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 ment.

$(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./ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay./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./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay./photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
  </div>
</div>

本文标签：