Slick: vertical mode: next/prev controls is not changed to up/down

[Grawl]

Vertical mode uses keyboard/drag/swipe controls from horizontal mode

https://codepen.io/Grawl/pen/qXbwQQ

Steps to reproduce the problem

1. Set vertical: true
2. Try to navigate through slides using swipes/dragging/keyboard

What is the expected behaviour?

If I drag a slide using mouse or touchscreen to the top, it should move to top and show new slide on bottom of a slide.

If I drag a slide using mouse or touchscreen to the bottom, it should move to top and show new slide on top of a slide.

If I press Down key, it should move to top and show new slide on bottom of a slide.

If I press Up key, it should move to bottom and show new slide on top of a slide.

What is observed behaviour?

When I press Up or Bottom key, nothing happens.

When I press Left key, slide moves up.

When I press Right key, slide moves down.

More Details

• Which browsers/versions does it happen on? Google Chrome 60
• Which jQuery/Slick version are you using? jQuery 3.2.1 & Slick 1.6.0
• Did this work before? I Don't know

[leggomuhgreggo]

Good catch. I'd say this is a priority. Wanna take a crack at a PR?

Made this demo to confirm

[Grawl]

@leggomuhgreggo sorry I am not have enough time for it. life, you know.

[leggomuhgreggo]

Jafeel. Thanks for submitting the issue.

[leggomuhgreggo]

Oh you just need to add verticalSwiping: true

[Grawl]

Okay, but what about to use up/down arrow keys instead of left/right on vertical mode?

[Abderezai]

I'm still seeing exact issue.

$(document).ready(function(){
  $('.product-single__photos').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      fade: true,
      swipe: false,
      asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
        vertical:true,
           verticalSwiping: true,
            swipe:true,
       slidesToShow: 3,
           slidesToScroll: 1,
    asNavFor: '.product-single__photos',
    dots: false,
            arrows: false,
    focusOnSelect: false
});
});

[Grawl]

@Abderezai oh god why your code indented so random

[Grawl]

@leggomuhgreggo @kenwheeler so what about to use up/down arrow keys instead of left/right on vertical mode?

[elynegrao]

Yea guys... i need same here. Work around?

[elynegrao]

Ok! my work around here for a nested slick.

$( ".vertical-slick" ).keydown(function( event ) {
       event.stopImmediatePropagation(); // Stops listen the keydown on a vertical element
});

$( ".horizontal-nested-slick" ).keydown(function( event ) {     
    if(event.which == 38 ) { // UP / CIMA
        $("#vertical-slick-father").slick('slickPrev');
                    ...

    }       
    if(event.which == 40 ) { // DOWN / BAIXO
        $("#vertical-slick-father").slick('slickNext');
                    ...
    }
});