javascript - How to make Slick swipeToSlide vertically?

I'm trying to make a navigation vertical carousel patible 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=".3.1/jquery.min.js"></script>
<link href=".8.1/slick.min.css" rel="stylesheet"/>
<script src=".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>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>

Share Improve this question asked May 13, 2022 at 15:42 NiceToMytyuk 4,3679 gold badges55 silver badges130 bronze badges

Is it ok if I add a few lines to the slick.js file? – user2495207 Commented May 18, 2022 at 1:25
@user2495207 sure you can override or change the slick.js file – NiceToMytyuk Commented May 18, 2022 at 7:06

Add a ment |

2 Answers 2

Sorted by: Reset to default 1 +50

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.

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745246824a4618446.html

javascript - How to make Slick swipeToSlide vertically? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to make Slick swipeToSlide vertically? - Stack Overflow

2 Answers 2

相关推荐