如何使 Slick swipeToSlide 垂直？

Question

我正在尝试制作与 IE11 兼容的导航垂直旋转木马我正在使用 slick library 作为旋转木马，我在使用 swipeToSlide 选项时遇到了一些问题，该选项应该允许我滑动到选定的幻灯片滑动但它只是一个滑动一个滑块：

如图所示，我会滚动到第 5 张幻灯片，但它只是滚动到下一张幻灯片。

代码如下：

        $(".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>

Answer 1

不确定这是否有帮助，但您可以尝试（我检查过它是否有效）。

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

代码在这里：

$(".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;

    };
});

我在 touch move not swiping through multiple elements on slick slider

Answer 2

大约在slick.js文件中的第2459行有一个if语句； if(_.touchObject.swipeLength >= _.touchObject.minSwipe) 具有以下结构：

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

我又添加了一个选项，幻灯片二：

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{
  ...
}

这里是真正的代码：
原文：

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

修改时间：

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

希望我没有遗漏任何东西。

如何使 Slick swipeToSlide 垂直？

How to make Slick swipeToSlide vertically?

html

javascript

css

jquery

slick.js