Slick: swipeToSlide not working with vertical: true

[andreyvolokitin]

If we set swipeToSlide to true while having vertical carousel - we can not swipe directly to slide - carousel always scrolls just by 1 slide. Demo: http://jsfiddle.net/ewmb9mx3/5/

[Bitneko]

I have the same problem.

[frontendwizard]

Same problem here.

[stephane-tessier]

+1

[gregbendes]

+1,I'll try to investigate this because it's gonna be a problem for an upcoming project I'll be working on.

[gregbendes]

I've played around with the code today, and it looks like the _getSlideCount_ function was not implemented for vertical scrolling when used with _swipeToSlide_. This part:

if (_.options.swipeToSlide === true) {
  _.$slideTrack.find('.slick-slide').each(function(index, slide) {
    if (slide.offsetLeft - centerOffset + ($(slide).outerWidth() / 2) > (_.swipeLeft * -1)) {
      swipedSlide = slide;
      return false;
    }
  });

  slidesTraversed = Math.abs($(swipedSlide).attr('data-slick-index') - _.currentSlide) || 1;

  return slidesTraversed;

}

uses offsetLeft and jQuery's outerWidth() to determine if we swiped the slide, but this is obviously for horizontal scrolling only. So if we include vertical here, like this:

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;
}

Then this seems to solve the issue.

However, we're also going to need a fix for swiping backwards. Luckily, @AlbinoDrought has solved this in a jsfiddle from another issue (#2002), see here:

http://jsfiddle.net/6z5Lv1ts/

Coupled with this solution, here's a working example for a vertical, infinite slideshow with _slideToSwipe_ enabled:

http://codepen.io/gregbendes/pen/XjQbKL

Note: _centerMode_ has to be false for this, but that suits me just fine.

[podrivo]

Thanks for the partial fix, @gregbendes !
It's still a confirmed bug:

• [ ] No _centerMode_ in vertical
• [ ] No _slideToSwipe_ in vertical

Pen with the issue: http://codepen.io/podrivo/pen/MjMGee/

[jbanulso]

@gregbendes Works like a charm! And at least for my case (and as per today) it works also with centerMode = true! Thanks!

[iPasqualito]

Thanks a lot for that fix @gregbendes !