How to make Slick swipeToSlide vertically?

Issue

I'm trying to make a navigation vertical carousel compatible with IE11 i'm using slick library for the carousel, i'm having some issues with swipeToSlide option which should allow me to slide to selected slide by swipe but instead it just swipe one slider by one:

Like in the image i would scroll to slide 5 but instead it just scroll to the next slide.

Here is the code:

        $(".slider").slick({
            centerMode: true,
            centerPadding: '60px',
            slidesToShow: 3,
            vertical: true,
            verticalSwiping: true,
            arrows: false,
            swipeToSlide: true,
            focusOnSelect: true,
        });

        body {
            background: #3498db;
        }

        .menu h3 {
            background: #fff;
            color: #3498db;
            font-size: 36px;
            line-height: 100px;
            margin: 10px;
            padding: 2%;
            position: relative;
            text-align: center;
        }

        .menu h3 {
            opacity: 0.8;
            transition: all 300ms ease;
        }

        .slick-center h3 {
            -moz-transform: scale(1.08);
            -ms-transform: scale(1.08);
            -o-transform: scale(1.08);
            -webkit-transform: scale(1.08);
            color: #e67e22;
            opacity: 1;
            transform: scale(1.08);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
    <div class="slider">
        <div class="menu">
            <h3>Menu 1</h3>
        </div>
        <div class="menu">
            <h3>Menu 2</h3>
        </div>
        <div class="menu">
            <h3>Menu 3</h3>
        </div>
        <div class="menu">
            <h3>Menu 4</h3>
        </div>
        <div class="menu">
            <h3>Menu 5</h3>
        </div>
    </div>

Solution

Approximately in the line 2459 inside the slick.js file there is an if statement; if(_.touchObject.swipeLength >= _.touchObject.minSwipe) which have the following structure:

if(swipeLength>=90){  //if the swipe is more than 90
  ...
  slideCount=value;   //slide one
  ...
}else{
  ...
}

I added one more option, to slide two:

if(swipeLength>=90 && swipeLength<200){  //if 90<=swipe<200
  ...
  slideCount=value;               //slide one
  ...
}else if(swipeLength>=200) {      //if swipe>=200
  ...
  slideCount=value+1;             //slide two           
  ...
}else{
  ...
}

Here is the real code:
Original:

if (_.touchObject.swipeLength >= _.touchObject.minSwipe) {
direction = _.swipeDirection();

switch (direction) {
   case "left":
   case "down":
      slideCount = _.options.swipeToSlide
      ? _.checkNavigable(_.currentSlide + _.getSlideCount())
      : _.currentSlide + _.getSlideCount();

      _.currentDirection = 0;

      break;

   case "right":
   case "up":
      slideCount = _.options.swipeToSlide
      ? _.checkNavigable(_.currentSlide - _.getSlideCount())
      : _.currentSlide - _.getSlideCount();

      _.currentDirection = 1;

      break;

   default:
}

if (direction != "vertical") {
   _.slideHandler(slideCount);
   _.touchObject = {};
   _.$slider.trigger("swipe", [_, direction]);
}
} else {
if (_.touchObject.startX !== _.touchObject.curX) {
   _.slideHandler(_.currentSlide);
   _.touchObject = {};
}

Modified:

if (_.touchObject.swipeLength >= _.touchObject.minSwipe && _.touchObject.swipeLength < 200) {
  direction = _.swipeDirection();

  switch (direction) {
    case "left":
    case "down":
      slideCount = _.options.swipeToSlide
        ? _.checkNavigable(_.currentSlide + _.getSlideCount())
        : _.currentSlide + _.getSlideCount();
      _.currentDirection = 0;

      break;

    case "right":
    case "up":
      slideCount = _.options.swipeToSlide
        ? _.checkNavigable(_.currentSlide - _.getSlideCount())
        : _.currentSlide - _.getSlideCount();

      _.currentDirection = 1;

      break;

    default:
  }

  if (direction != "vertical") {
    _.slideHandler(slideCount);
    _.touchObject = {};
    _.$slider.trigger("swipe", [_, direction]);
  }
} else if (_.touchObject.swipeLength >= 200) {
  direction = _.swipeDirection();

  switch (direction) {
    case "left":
    case "down":
      slideCount = _.options.swipeToSlide
        ? _.checkNavigable(_.currentSlide + _.getSlideCount())
        : _.currentSlide + _.getSlideCount();
      slideCount++;
      _.currentDirection = 0;

      break;

    case "right":
    case "up":
      slideCount = _.options.swipeToSlide
        ? _.checkNavigable(_.currentSlide - _.getSlideCount())
        : _.currentSlide - _.getSlideCount();
      slideCount--;
      _.currentDirection = 1;

      break;

    default:
  }

  if (direction != "vertical") {
    _.slideHandler(slideCount);
    _.touchObject = {};
    _.$slider.trigger("swipe", [_, direction]);
  }
} else {
  if (_.touchObject.startX !== _.touchObject.curX) {
    _.slideHandler(_.currentSlide);
    _.touchObject = {};
  }
}

I hope I didn't miss anything.

Answered By - user2495207