'How to make Slick swipeToSlide vertically?

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 1:^[1]

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.

Solution 2:^[2]

Not sure if this is gonna help, but you can try (as I check this is working).

https://codepen.io/BMI/pen/ZRYeOB

The code here:

$(".slider").slick({
    asNavFor: '.nav',
    slidesToShow: 1,
      slidesToScroll: 1,
    swipeToSlide: true
});

$(".nav").slick({
    asNavFor: '.slider',
    slidesToShow: 5,
    slidesToScroll: 1,
    draggable:true,
    swipeToSlide: true,
    vertical: true,
    verticalSwiping: true,
    centerMode: false
});

// replace getSlideCount and getNavigableIndexes without rehosting hack

$(".nav, .slider").each(function() {
        this.slick.getSlideCount = function() {

        var _ = this,
            slidesTraversed, swipedSlide, centerOffset;
            

        centerOffset = _.options.centerMode === true ? _.slideWidth * Math.floor(_.options.slidesToShow / 2) : 0;

      if (_.options.swipeToSlide === true) {
                
            _.$slideTrack.find('.slick-slide').each(function(index, slide) {
                var offsetPoint = slide.offsetLeft,
                    outerSize = $(slide).outerWidth();
                
                if(_.options.vertical === true) {
                    offsetPoint = slide.offsetTop;
                    outerSize = $(slide).outerHeight();
                }
                if (offsetPoint - centerOffset + (outerSize / 2) > (_.swipeLeft * -1)) {
                    swipedSlide = slide;
                    return false;
                }
            });
            slidesTraversed = Math.abs($(swipedSlide).attr('data-slick-index') - _.currentSlide) || 1;
            
            return slidesTraversed;
        } else {
            return _.options.slidesToScroll;
        }

    };
    
        this.slick.getNavigableIndexes = function() {

        var _ = this,
            breakPoint = 0,
            counter = 0,
            indexes = [],
            max;

        if (_.options.infinite === false) {
            max = _.slideCount;
        } else {
            breakPoint = _.options.slideCount * -1;
            counter = _.options.slideCount * -1;
            max = _.slideCount * 2;
        }

        while (breakPoint < max) {
            indexes.push(breakPoint);
            breakPoint = counter + _.options.slidesToScroll;
            counter += _.options.slidesToScroll <= _.options.slidesToShow ? _.options.slidesToScroll : _.options.slidesToShow;
        }

        return indexes;

    };
});

I found this on touch move not swiping through multiple elements on slick slider

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user2495207
Solution 2	Hristijan Slavkoski

'How to make Slick swipeToSlide vertically?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]