javascript - 触摸移动不滑动滑动条上的多个元素

Question

我有一个垂直滑动的滑块，并且希望在通过触摸动作滑动时在多张幻灯片上滑动。但是，无论我滑动多少张幻灯片，它都会向后滑动，只滑动一张幻灯片。
以下是我启用幻灯片的方式：
如何滑动用户选择滑动的幻灯片数量？

$('#numbersSlider').slick({
      vertical: true,
      verticalSwiping: true,
      arrows: false,
      slidesToShow: 5,
      swipeToSlide: true
  });

.numbers-box {
    width: 200px;
    height: 100%;
    border: 3px solid gray;
    text-align: center;
}
        
#numbersSlider {
    text-align: center;
    list-style-type: none;
    font-weight: bold;
    font-size: 40px;
    overflow: scroll;
    height: 100%;
}
            
.slick-slide {
    padding: 8px 0;
    cursor: pointer;
 }
                
.slick-current {
    background-color: lightblue;
 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<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.9.0/slick.min.js"></script>


<div class="numbers-box">
 <div id="numbersSlider">
  <div class="select-number">1</div>
  <div class="select-number">2</div>
  <div class="select-number">3</div>
  <div class="select-number">4</div>
  <div class="select-number">5</div>
  <div class="select-number">6</div>
  <div class="select-number">7</div>
  <div class="select-number">8</div>
  <div class="select-number">9</div>
  <div class="select-number">10</div>
  <div class="select-number">11</div>
  <div class="select-number">12</div>
 </div>
</div>

Answer 1

您只需要添加slidesToScroll。

$('#numbersSlider').slick({
      dots: true,
      vertical: true,
      slidesToShow: 5,
      slidesToScroll: 5,
      verticalSwiping: true,
  });